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
Vous devez vous connecter pour publier un commentaire.
La case à cocher n'est pas modifié dans l'INTERFACE utilisateur car à chaque fois qu'une case à cocher est cliqué, l'événement click se propage vers le "li" de l'élément et activer /désactiver la fonction de rappel est appelée. Lorsque l'interrupteur de rappel est appelée, vous êtes re-rendu de votre point de vue, et depuis la "Cession" de l'attribut de l'Utilisateur de votre modèle n'a pas changé, vous êtes re-rendu de la vue avec le même "vérifié" état comme avant.
Vous pouvez résoudre ce problème en empêchant la propagation de l'événement de clic lorsqu'il est initialisé par le bouton radio. Par exemple, ajoutez ce qui suit à la radio cliquez sur le bouton gestionnaire de votre point de vue:
Cela permettra d'intercepter l'événement click à chaque fois que le bouton radio est cliqué et de vous empêcher de basculer rappel de l'appelé. Notez que je suis aussi mise à jour de l'Affectation de l'attribut de l'Utilisateur de votre modèle, de sorte que lorsque votre vue de la re-rend la prochaine fois, vos bagages de l'etat sera correctement configuré.
OriginalL'auteur Johnny Oshika