Gardez une trace des onglets avec knockoutjs + twitter bootstrap
J'essaie de garder une trace de l'onglet sélectionné dans la vue modèle, mais je n'arrive pas à le faire fonctionner.
Dans le code suivant lorsque vous cliquez sur un onglet en-tête est mise à jour correctement, mais le contenu de l'onglet ne s'affiche pas. Si vous supprimez click: $parent.selectSection
ensuite le contenu, mais la tête n'est pas mise à jour.
Maintenant, si vous retirez la data-bind="css: { active: selected }"
de la li
puis il semble fonctionner lorsque vous cliquez sur les onglets mais le bouton pour sélectionner le deuxième onglet ne fonctionne pas.
Comment puis-je faire ce travail?
Voir: http://jsfiddle.net/5PgE2/3/
HTML:
<h3>
<span>Selected: </span>
<span data-bind="text: selectedSection().name" />
</h3>
<div class="tabbable">
<ul class="nav nav-tabs" data-bind="foreach: sections">
<li data-bind="css: { active: selected }">
<a data-bind="attr: { href: '#tab' + name }
, click: $parent.selectSection" data-toggle="tab">
<span data-bind="text: name" />
</a>
</li>
</ul>
<div class="tab-content" data-bind="foreach: sections">
<div class="tab-pane" data-bind="attr: { id: 'tab' + name }">
<span data-bind="text: 'In section: ' + name" />
</div>
</div>
</div>
<button data-bind="click: selectTwo">Select tab Two</button>
JS:
var Section = function (name) {
this.name = name;
this.selected = ko.observable(false);
}
var ViewModel = function () {
var self = this;
self.sections = ko.observableArray([new Section('One'),
new Section('Two'),
new Section('Three')]);
self.selectedSection = ko.observable(new Section(''));
self.selectSection = function (s) {
self.selectedSection().selected(false);
self.selectedSection(s);
self.selectedSection().selected(true);
}
self.selectTwo = function() { self.selectSection(self.sections()[1]); }
}
ko.applyBindings(new ViewModel());
source d'informationauteur Manuel
Vous devez vous connecter pour publier un commentaire.
Il ya plusieurs façons que vous pouvez gérer ce soit en utilisant bootstrap JS ou peu d'avoir knock-out ajouter/supprimer la
active
classe.De le faire juste avec knock-out, voici une solution, lorsque l'Article en lui-même a calculé afin de déterminer si elle est actuellement sélectionné.
Balisage:
Exemple ici: http://jsfiddle.net/rniemeyer/cGMTV/
Il y a un certain nombre de variations que vous pourriez utiliser, mais je pense que c'est une approche simple.
Voici un tweak où l'onglet actif utilisé le nom de la section en tant que modèle: http://jsfiddle.net/rniemeyer/wbtvM/