backbone.js Veranstaltung verbindlich bricht radio-Tasten-Funktionalität

Ich bin ziemlich neu im Backbone.js aber ich bin mir ziemlich sicher, ich mache das richtige.

Hier sind mein Rückgrat anzeigen und Modelle:

//USER-MODELL

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 });
    }

});

//USER ANZEIGEN

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();
    }

});

Und hier ist das JQuery-template, dass ich verwende für die einzelnen Benutzer anzuzeigen. Die view gerendert wird, die innerhalb einer anderen großen anzeigen, das ist die Sammlung.

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

In den letzten li ich habe drei radio-buttons, mit dynamischen id ' s und den gleichen Namen (auch dynamische). Jede Taste hat ein eigenes label.

Alles war in Ordnung arbeiten, die radio-buttons waren Auswahl und machen Ihren job gut, bis ich fügte hinzu, diese Linie "click ul": "toggle" in der Ansicht Ereignisse.

Den Fall funktioniert, wenn ich auf jedem Benutzer die Zeile in der Ansicht, wird das Modell aktualisiert, und der Benutzer wird ausgewählt /abgewählt.

Einzige Sache ist, dass mit dieser Linie, die radio buttons funktionieren einfach nicht.
Die Werte sind gesetzt, aber es passiert nichts, wenn ich versuche, um den Wert zu ändern (klicken Sie auf einen anderen radio-button).

Kein Fehler generiert wird, in der browser-Konsole, die ist komisch...

KORREKTUR: Wenn ich auf ein Optionsfeld klicken, wird das click-Ereignis von backbone-Ansicht ausgelöst wird, die Auswahl ist getan, aber der button bleibt deaktiviert. Es scheint, dass backbone übernimmt, aber ich will trigger nur, wenn ich auf den ul Teil, nicht auf andere Elemente im inneren, wie Schalter, Taster, etc.

Jedoch, wenn ich auf die Bezeichnungen für die Tasten, passiert nichts. Kein Rückgrat-Ereignis ausgelöst wird, und keine Schaltfläche ausgewählt ist.

Jemand eine Idee warum das passieren könnte?

InformationsquelleAutor noir | 2011-08-24