backbone.js事件绑定正在中断单选按钮功能

我对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 事件，也没有选择按钮。
有人知道为什么会这样吗？

UI中的复选框不会发生变化，因为无论何时单击复选框，单击事件都会传播到“li”元素并调用toggle回调。当调用toggle回调时，您将重新呈现整个视图，并且由于用户模型的“Assignment”属性没有发生变化，因此您将重新呈现具有与以前相同的“选中”状态的视图。
当单击事件由单选按钮初始化时，可以通过阻止单击事件的传播来解决此问题。例如，将以下单选按钮单击处理程序添加到视图中：

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
        },

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

backbone.js事件绑定正在中断单选按钮功能

1条答案

相关问题

热门标签

最新问答