Backbone.js 将子变量持久保存到父变量

Question

在 Backbone.js 中对父级执行操作时，持久化继承变量的正确方法是什么？ 我可以看到一些合乎逻辑的方法来做到这一点，但它们似乎效率低下，我认为可能值得征求其他意见。

这两个类都是构造要保存到集合中的新模型的视图，父级将变量传递到可以设置此变量的弹出窗口。

Answer 1

我不确定你的问题是否有足够的细节来回答，但有几种方法可以做到这一点：

• 共享一个通用模型。 正如您所描述的，您使用两个视图来构建一个模型，因此最简单的方法可能是将模型本身传递给子视图并让子视图视图修改模型，而不是在视图之间传递任何变量：

  var MyModel = Backbone.Model.extend({});
  
  var ParentView = Backbone.View.extend({
      // initialize the new model
      initialize: function() {
          this.model = new MyModel();
      },
  
      // open the pop-up on click
      events: {
          'click #open_popup': 'openPopUp'
      },
  
      openPopUp: function() {
          // pass the model
          new PopUpView({ model: this.model })
      }
  });
  
  var PopUpView = Backbone.View.extend({
      events: {
          'change input#someProperty': 'changeProperty'
      },
  
      changeProperty: function() {
          var value = $('input#someProperty').val();
          this.model.set({ someProperty : value });
      }
  });
  

• 在父节点上触发事件。如果由于某种原因您不能只通过模型传递值，您可以只传递对父节点的引用并触发事件：

  var ParentView = Backbone.View.extend({
      initialize: function() {
          // bind callback to event
          this.on('updateProperty', this.updateProperty, this);
      },
  
      updateProperty: function(value) {
          // do whatever you need to do with the value here
      },
  
      // open the pop-up on click
      events: {
          'click #open_popup': 'openPopUp'
      },
  
      openPopUp: function() {
          // pass the model
          new PopUpView({ parent: this })
      }
  });
  
  var PopUpView = Backbone.View.extend({
      events: {
          'change input#someProperty': 'changeProperty'
      },
  
      changeProperty: function() {
          var value = $('input#someProperty').val();
          this.options.parent.trigger('updateProperty', value);
      }
  });