knockout.js - Bootstrap liste avec le contenu à partir d'un modèle

5

Ce n'est pas exactement clair ce que vous cherchez. Voici un exemple de violon qui, je l'espère, vous aidera à:

http://jsfiddle.net/V3nVd/3/

Il montre deux concepts:

1) à l'Aide d'une Liaison Personnalisée d'ajouter des Liste des attributs

2) à l'Aide d'un modèle d'encapsuler le code HTML (y compris la liaison personnalisée) qui permet de créer un bouton avec une liste.

Voici les options vous pouvez envoyer en une Liste.

EDIT: http://jsfiddle.net/V3nVd/7/

Mise à jour de violon pour montrer tirant sur le contenu html à partir d'un rendu du modèle. Notez également l'utilisation de l'option html dans la liste d'initialisation.
- Merci, mais pas exactement ce que je cherchais. Dans votre jsfiddle, je voudrais que le contenu de la liste (c'est à dire 'Contenu') définies dans un modèle. Ma liste indique les détails d'une personne (nom, prénom, e-mail,...) que je voudrais définir dans un modèle. Je bifurquais votre jsfiddle montrant ce que je suis en train de faire. jsfiddle.net/V3nVd/4
- J'ai édité ma réponse pour ajouter un nouveau violon, qui extrait le contenu d'un autre élément rendus par knock-out. Il n'est pas parfait, mais l'idée générale. Autant que je sache modèles knock-out ne peut pas rendre une chaîne (comme jsrender) donc j'ai eu à rendre un div caché, puis tirez la chaîne à partir d'elle. Pas idéal, car il finit par y compris le contenu en double. Peut-être l'un des gens qui, pour comprendre le fonctionnement interne de knock-out un peu mieux sera de carillon dans une meilleure idée.
- D'accord avec vous que ce n'est pas la solution idéale. Mais cela fonctionne, et jusqu'à ce que je trouve une meilleure réponse que je vais l'utiliser de cette façon. Merci beaucoup!
- Je sais je suis en retard à la fête, mais le JSFiddle liens ci-dessus ne fonctionne pas pour moi en raison d'un jQuery erreur ("jQuery.propre n'est pas une fonction"). La modification de la version de knock-out semble fixé: jsfiddle.net/V3nVd/54/
- Merci Pete... je suppose qu'il doit y avoir eu quelques changements ultérieurs. Mon premier violon fonctionne ici: jsfiddle.net/V3nVd/56, et mon montage est ici: jsfiddle.net/V3nVd/57
- Tous le violon mentionnés ci-dessus ont échoué avec l'erreur disposeWhenNodeIsRemoved
InformationsquelleAutor John Earles

Si je change le texte de la liaison à une valeur de liaison de la valeur n'a pas été rendue, si je sélectionne l'élément avec l'ID avec jquery et imprimer sa valeur dans la console, la valeur est correcte, mais il n'est pas montré.

<center>
  <h2>Popover Demo</h2>
  <div data-bind="template: {name: 'popoverTemplate', foreach: commands}"></div>
</center>

<script type="text/html" id="popoverTemplate">
    <div style="display:none;" data-bind="attr: {'id': $data.command + 'Content'}, template: {name: 'popoverContent', data: $data.content}"></div>    
    <a href="#" class="btn" data-bind='text: $data.command, popover: $data'></a>
</script>

<script type="text/html" id="popoverContent">
    <p>Name: <input type="text" data-bind='value: $data.name'></p>
    <p>Email: <b data-bind='text: $data.email'></b></p>
</script>

Voici l'exemple http://jsfiddle.net/mounir/V3nVd/15/

Grâce

Edit:

Ici est un exemple de travail, j'ai changé le ko.applyBindings() à ko.applyBindingsToDescendants pour inclure le contexte de liaison $root et $parent lorsque nous tenons à associer un bouton par exemple à une fonction dans une racine viewModel.

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });

Prendre un coup d'oeil @JSFiddle http://jsfiddle.net/mounir/Mv3nP/4/

InformationsquelleAutor Mounir

Vous devez vous connecter pour publier un commentaire.