1

所以我正在考虑将 jQuery 应用程序移至主干。我有一个视图，我传递一个集合，该集合创建一个视图列表，每个视图都是传递的模型。此视图将信息输出到输入中。有没有办法，我可以自动从视图传播到相关模型，或者这是否为我自动完成。

比如说我有一个看起来像这样的视图：

在此处输入图像描述

我有以下内容，当我更新 this.update_value 时会被调用。但是我怎么知道哪个模型发生了变化？我可以参考导致change事件的特定模型吗？对不起，如果这听起来很基本。

  var HomepagePositionView = Backbone.View.extend({
    className:'row',
    initialize:function(){
      _.bindAll(this, "render");
      this.listenTo(this.model, 'change', this.update_value);
    },
    render:function(){
         var html="<div class='span2'>" + this.model.get('name') + "</div><div class='span1'><input type=text class='hp_score input-mini pull-right' value='" + this.model.get('hp_score') + "' /></div>";
         $(this.el).html(html);
         this.$('.hp_score').bind('change', this.update_model);
         return this;
    },
    update_model:function(){

      console.log('this model changed' + this.model.id); // this.model.id is not working
    }
  });

和

  var HomepagePositionsView = Backbone.View.extend({
      render:function(){
        // iterate through collection and for each model create a HomepagePositionView
      }

如果基础模型没有更改，我希望更新按钮为空白。如果我的 Church and State 从 90 -> 95 变化，Backbone 中是否有办法判断哪些模型发生了变化？

谢谢

4

2 回答 2

2

您的 update_model 方法正在以错误的范围调用。在该方法中，“this”应该指的是 HomepagePositionView，但在您的情况下，它可能指的是触发事件的 DOM 元素。如果您在视图上定义“事件”对象，主干视图将自动将方法绑定到具有正确范围的事件。有关详细信息，请参阅http://backbonejs.org/#View。例如，在 HomepagePositionView 中删除以下行：

this.$('.hp_score').bind('change', this.update_model);

并在您的 className 变量后立即添加以下内容：

  events: {
    "change .hp_score": "update_model"
  }

Backbone.View 将自动绑定“update_model”方法以使用 hp_score 类更改 DOM 元素上的事件。“update_model”方法将在正确的范围内调用，因此“this”将引用 HomepagePositionView。

或者，您可以像现在尝试那样自己绑定事件，但是在 initialize() 方法中而不是在 render() 方法中进行绑定，因为每个视图可能会多次调用 render()。为了确保在正确的范围内调用“update_model”方法，您可以使用下划线“bind”方法创建一个绑定到当前范围的新方法。像这样的东西（但如果您如上所述定义“事件”对象，这也是不必要的）：

var method = _.bind(this.update_model,this);
this.$('.hp_score').bind('change', method);

至于您的第二个问题，如果无论如何要判断模型是否已更改，那么您这样做的唯一方法是自己收听基础模型上的“更改”事件。

希望这可以帮助！

于 2013-09-07T02:56:43.087 回答
1

最终，就像您说的那样，您希望其中包含集合的视图（HomepagePositionsView）来处理更改。

我不确定是否存在一个现有的主干事件（例如监听集合中的模型以进行更改）以便在一个步骤中收听该视图，所以在我看来，最简洁的方法是使用 pub -子模式。

在主页位置视图中：

update_value: function() {
    Backbone.trigger('model changed', this.model); //sends off a custom event,  attaching the changed model with it
}

然后，在 HomepagePositionsView 初始化时：

initialize: function() {
    Backbone.on('model changed', this.dealwithChange, this); //binds this function to the event
}

...

dealWithChange: function(changedModel) {
    //you can apply your logic to the changed model here.
}

（并确保Backbone.off('model changed', this.dealwithChange, this);在销毁 HomepagePositionsView 时也调用）

于 2013-09-07T01:26:47.230 回答