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);
      }
  });