我是骨干新手,我正在尝试开发像App这样的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();
}
}
我想知道问题会是什么?
感谢您的帮助!!!
答案 0 :(得分:1)
我猜this.$("input.element");
是指列表中的第一项。
当您第一次使用第一个项目中的值更改模型值时,它会起作用。但第二次它不起作用,因为第一项的价值仍然相同。
这就是为什么你必须从事件中获取输入值 - e.currentTarget.value
答案 1 :(得分: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();
}
}