backbone.js事件绑定破坏了单选按钮的功能。

Question

我是一名新手，正在学习Backbone.js，但我相信我做得没问题。

以下是我的Backbone视图和模型：

//用户模型

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"。

事件有效，当我单击视图中的每个用户行时，模型会更新，并选择/取消选择用户。

唯一的问题是，在这行代码的存在下，单选按钮就不起作用了。值被设置了，但当我尝试更改值（单击其他单选按钮）时，什么也不发生。

浏览器控制台没有生成任何错误，这很奇怪...

更正：当我单击单选按钮时，backbone视图的单击事件被触发，会进行选择操作，但按钮仍处于未选中状态。似乎backbone接管了控制权，但我想要的只是在单击ul部分时触发，而不是在其内部的其他元素上触发，例如按钮等。

但是，当我单击按钮的标签时，什么都没有发生。不触发backbone事件，不选择任何按钮。

任何人有任何想法为什么会发生这种情况吗？

- noir

Answer 1

复选框在用户界面中没有发生变化，因为每当单击复选框时，单击事件会传播到“li”元素并调用切换回调。当调用切换回调时，您正在重新呈现整个视图，并且由于未更改用户模型的“Assignment”属性，因此您正在使用与之前相同的“checked”状态重新呈现视图。

您可以通过防止单击事件在由单选按钮初始化时传播来解决此问题。例如，在您的视图中添加以下单选按钮单击处理程序：

        events: {
            "click input[type=radio]": "onRadioClick",
            "click ul li": "toggle"
        },

        onRadioClick: function (e) {
            e.stopPropagation();
            this.model.set({ Assignment: $(e.currentTarget).val() }, {silent:true}); // {silent: true} is optional. I'm only doing this to prevent an unnecessary re-rendering of the view
        },

每当单选按钮被点击时，这将拦截点击事件并防止调用您的切换回调。请注意，我还更新了用户模型上的Assignment属性，以便下次视图重新呈现时，您的选中状态将被正确设置。

- Johnny Oshika

---

嗨 Johnny，感谢你的回答。最终我按照你建议的方法解决了这个问题，但我不确定这是否正常。现在我明白为什么会发生这种情况了。再次感谢。 - noir