backbone.js liaison d'événements, c'est de casser les boutons radio de la fonctionnalité

Je suis assez nouveau à Backbone.js mais je suis assez sûr que je suis en train de réaliser ce droit.

Voici mon épine Dorsale de la vue et de modèles:

//L'UTILISATEUR MODÈLE

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

});

//VUE DE L'UTILISATEUR

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

});

Et voici le JQuery template que j'utilise pour chaque utilisateur. La vue est rendue à l'intérieur d'un autre grand de la vue, qui est la collection.

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

Dans la dernière li j'ai trois boutons radio, avec la dynamique de l'id et le même nom (dynamique). Chaque bouton possède son propre label.

Tout fonctionnait bien, les boutons de la radio ont été les sélectionnant et en les faisant leur travail d'amende, jusqu'à ce que j'ai ajouté cette ligne "click ul": "toggle" dans la vue événements.

L'événement fonctionne, lorsque je clique sur chaque ligne dans la vue, le modèle est mis à jour et l'utilisateur est activée /désactivée.

Seule chose est que, avec cette ligne, les boutons radio ne fonctionne tout simplement pas.
Les valeurs sont définies, mais rien ne se passe lorsque j'essaie de modifier la valeur (cliquez sur un autre bouton radio).

Aucune erreur n'est générée dans le navigateur de la console, ce qui est un peu bizarre...

CORRECTION: Lorsque je clique sur un bouton radio, cliquez sur l'événement à partir de la colonne vertébrale est déclenchée, le choix est fait, mais le bouton reste pas cochée. Il semble que l'épine dorsale prend le dessus, mais tout ce que je veux est de déclencher juste quand je clique sur le ul partie, pas sur d'autres éléments à l'intérieur, comme des boutons, etc.

Cependant, lorsque je clique sur les étiquettes pour les boutons, rien ne se passe. Pas d'épine dorsale de l'événement est déclenché, et pas de bouton est sélectionné.

Quelqu'un a une idée de pourquoi cela pourrait se produire?

OriginalL'auteur noir | 2011-08-24