骨干视图事件未触发差异答案

【问题标题】：Backbone View Event not firing difference骨干视图事件未触发差异
【发布时间】：2013-08-23 04:48:24
【问题描述】：

我是一个骨干新手，我正在尝试开发一个类似 Todo 的应用程序。

我有一个主视图，它是一个列表视图，它有子视图。 - 子视图内容可以双击编辑，当按下回车键时会被保存。 - 非常类似于骨干 github 代码中给出的 todo 示例。

var SubView = Backbone.View.extend({
    tagName: "li",    
    events: {
        "dblclick"              : "show_edit_view",
        "blur .element"         : "close_edit_view",
        "keypress .element"     : "save_edit_view",
        "click button.remove"   : "remove_question"
    },
    initialize: function(){
        this.render();             
        this.listenTo(this.model, "change", this.render);
    },
    render: function(){        
        this.$el.html(_.template($("#sub_view_template").html(),this.model.toJSON()));
        return this;
    },
    show_edit_view: function() {
        this.$el.find("div.view").addClass("no_show");
        this.$el.find("input").removeClass("no_show");
    },
    close_edit_view: function(){
        this.$el.find("div.view").removeClass("no_show");
        this.$el.find("input").addClass("no_show");
    },
    save_edit_view: function(e){
        if (e.keyCode == 13) {            
            this.model.save({name: e.currentTarget.value});
            this.close_edit_view();
        }
    }
});

这个模板是

<script id="sub_view_template" type="text/x-template">
   <div class="view"><%= name %></div>
   <input class="element no_show" value="<%= name %>" type="text" /> <button class="remove">Remove</button>
</script>

这个工作正常，模型在视图中更新，更新发布请求被发送到服务器。

但是，当我更改初始化和 save_edit_view 函数时，只会触发第一个更改事件，而不是更改事件。

initialize: function(){
    this.render();             
    this.listenTo(this.model, "change", this.render);
    this.input = this.$("input.element");
},
save_edit_view: function(e){
    if (e.keyCode == 13) {            
        this.model.save({name: $(this.input).val()});
        this.close_edit_view();
    }
}

我想知道问题可能是什么？

感谢您的帮助！！！

【问题讨论】：

你给render打了多少次电话？
不要在.initialize() 方法中调用.render() 函数。 render 应该在视图之外调用，仅仅在视图上实例化并不意味着渲染。
@alexanderb 因为子视图没有分配给任何现有元素 - 我认为在初始化函数中调用渲染会更好。 - 我想，我可以避免为它写一个对象。那是我的意图。但是，对于那些绑定到 dom 中现有元素的视图，我总是单独调用 render。
@muistooshort 好吧，子视图渲染只在初始化函数中调用。
对，el 的内容通常会在render 内部发生变化，因此任何引用el 内容的内容也应该在render 内部进行。或者根本不用缓存引用，如果您使用this.$() 正确本地化您的搜索，这几乎不值得麻烦。

标签： backbone.js backbone-events

【解决方案1】：

问题是你只指一个对象。这意味着当您进行分配时：

this.input = this.$('input.element'); // match the current elements.

您只能从该确切对象中获取值。在第一个change 之后，this.input 不是包含您的新值的同一个对象，并且无法将save 具有新值的模型。

一个可能有帮助的演示：

console.log(this.$('input.element') != this.$('input.element')); // true

这就是为什么下面会起作用的原因：

save_edit_view: function(e){
  if (e.keyCode == 13) {            
    this.model.save({name: this.$('input.element').val()});
    this.close_edit_view();
  }
}

【讨论】：

感谢 fbynite！这正是我想要的。当然它有效，但是，我想知道，在 Backbone 的 ToDo 示例中，他们使用相同的方法设置 this.some_variable - 但是，在那个应用程序中，我看不到这个问题。

【解决方案2】：

我猜this.$("input.element"); 指的是列表中的第一项。当您第一次使用第一项的值更改模型值时，它会起作用。但是第二次它不起作用，因为第一项的值仍然相同。这就是为什么你必须从事件中获取输入值 - e.currentTarget.value

【讨论】：

好吧，this.$("input.element") 是主视图内每个子视图中的一个元素。我想知道从事件中获取价值是一种好习惯吗？
是的，这是一个很好的做法。您在视图范围内绑定事件。当某些事件触发时，您已经在事件中有一个元素。所以你不应该再次在 DOM 中查找它 - 这是一个冗余操作。