我对Backbone.js很陌生,但我很确定我做得对。
以下是我的 Backbone.js 视图和模型:
//用户模型
var User = Backbone.Model.extend({
defaults: {
UserID: 0,
FirstName: "",
LastName: "",
Assignment: 0,
Selected: false
},
toggle: function (){
var value = this.get("Selected");
this.set({ Selected : !value });
}
});
//用户视图
var UserView = Backbone.View.extend({
parentview: null, // the parent view
initialize: function () {
this.parentview = this.options.parentview
this.template = $("#user-template")
this.model.bind("change", this.render, this);
},
render: function () {
var content = this.template.tmpl(this.model.toJSON());
$(this.el).html(content);
return this;
},
events: {
"click ul li": "toggle"
},
toggle: function () {
this.model.toggle();
}
});
这是我为每个用户的视图使用的JQuery模板。视图在另一个大视图中呈现,即集合。
<ul id="user-container"
{{if Selected == 1 }} class="selected" {{/if}}
>
<li class="col1" {{if Selected == 0}} style="visibility:hidden" {{/if}} >
<img src="@Content.ImageUrl("pin-icon.png", "base")" />
</li>
<li class="col2">${FirstName} ${LastName} </li>
<li class="col3-last">
<input id="radio-${$item.view}-PM-${UserID}" name="radio-${$item.view}-${UserID}" type="radio" value="1" class="button"
{{if Assignment == 1}} checked="checked" {{/if}}
/>
<label for="radio-${$item.view}-PM-${UserID}">
PM</label>
<input id="radio-${$item.view}-SV-${UserID}" name="radio-${$item.view}-${UserID}" type="radio" value="2" class="button"
{{if Assignment == 2 }} checked="checked" {{/if}}
/>
<label for="radio-${$item.view}-SV-${UserID}">
STAFF</label>
<input id="radio-${$item.view}-NA-${UserID}" name="radio-${$item.view}-${UserID}" type="radio" value="0" class="button"
{{if Assignment == 0 }} checked="checked" {{/if}}
/>
<label for="radio-${$item.view}-NA-${UserID}">
NONE</label>
</li>
</ul>
在最后一个li
中,我有三个单选按钮,有动态id和相同的名称(也是动态的)。每个按钮都有自己的标签。
所有的工作都很好,单选按钮选择和工作都很好,直到我在视图的事件中添加了"click ul": "toggle"
这一行。
该事件起作用,当我单击视图中每个用户的行时,模型将更新,用户将被选中/取消选中。
唯一的问题是,在这行代码中,单选按钮不起作用。值是设置好的,但是当我试图更改值(单击另一个单选按钮)时,没有任何React。
浏览器控制台中没有生成错误,这很奇怪...
更正:当我点击一个单选按钮时,会触发 Backbone.js 视图中的click事件,选择已经完成,但按钮保持未选中状态。看起来 Backbone.js 视图接管了任务,但我只想在我点击ul
部分时触发,而不是在里面的其他元素(如按钮等)上。
然而,当我点击按钮的标签时,什么都没有发生。没有触发 Backbone.js 事件,也没有选择按钮。
有人知道为什么会这样吗?
1条答案
按热度按时间cbjzeqam1#
UI中的复选框不会发生变化,因为无论何时单击复选框,单击事件都会传播到“li”元素并调用toggle回调。当调用toggle回调时,您将重新呈现整个视图,并且由于用户模型的“Assignment”属性没有发生变化,因此您将重新呈现具有与以前相同的“选中”状态的视图。
当单击事件由单选按钮初始化时,可以通过阻止单击事件的传播来解决此问题。例如,将以下单选按钮单击处理程序添加到视图中:
这将在单击单选按钮时拦截click事件,并防止调用切换回调。注意,我还更新了User模型上的Assignment属性,以便下次重新呈现视图时,正确设置选中状态。