Récursive du modèle avec knock-out js

Est-il possible de créer un modèle récursif seulement avec knock-out js?

J'ai un knock-out de l'objet:

function FormElementNode(children, text, value) {
   var self = this;
   self.children = ko.observableArray(children);
   self.text = ko.observable(text);
   self.value = ko.observable(value);
}

enfants est un tableau de FormElementNode.

Je veux l'attirer et ce sont les enfants de façon récursive dans une hiérarchie de la liste de nœuds:

<ul>
   <li>Parent text value:
      Children: 
      <ul>
         <li>Child1 text value</li>
         <li>Child2 text value</li>
   </li>

Merci!

InformationsquelleAutor bentzy | 2013-03-20
  1. 36

    Oui knock-out prend en charge récursive des modèles de sorte que vous pouvez de référence et de rendre le même modèle à l'intérieur du modèle.

    Un exemple de code html dans votre cas devrait ressembler à ceci:

    <script id="formElementNodeTemplate" type="text/html">
<ul>
    <li>Parent <span data-bind="text: text"></span> 
               <span data-bind="text: value"></span>
        <br/>
        Children:
        <!-- ko template: { name: 'formElementNodeTemplate',  
                            foreach: children } -->
        <!-- /ko -->        
     </li>
   </ul>
</script>    

<div data-bind="template: { name: 'formElementNodeTemplate', data: $data }">
</div>

    Démo JSFiddle.

    • Merci de répondre rapidement. J'ai une autre 'foreach' à l'intérieur du modèle - et j'obtiens une erreur: "Ce moteur de template ne prend pas en charge le 'foreach' liaison à l'intérieur de ses modèles". Dois-je utiliser un autre modèle de construction de ce imbriquée foreach?
    • Un autre problème est que je veux que les enfants soient frères et sœurs représentés par des <li>. La solution actuelle que vous avez offert ouvre une nouvelle liste (<ul>) pour chaque enfant.
    • Concernant votre antother foreach problème: je pense que vous devriez vous poser une autre question où vous montrez votre code problématique. Sur le <ul> j'ai juste donné un petit échantillon si vous avez des besoins spécifiques, vous pouvez jouer avec elle lorsque vous mettez votre ul, li autour de votre modèle: jsfiddle.net/KtbXb/1
    • Merci! Ça fonctionne maintenant! Concernant la foreach question, quand j'ai enlevé le trait de soulignement code de l'erreur a disparu 🙂
    • Grande réponse. Comment voulez-vous mettre à jour le code de sorte qu'un utilisateur peut ajouter des éléments à des enfants au moment de l'exécution? Comme, ont un bouton, il/elle peut cliquer et un nouvel élément est ajouté. Je peux l'obtenir pour la racine, mais pas les enfants?
    • En général, l'ajout d'enfants devrait fonctionner de la même. Donc, si vos enfants collection est un ko.obsrevableArray puis il devrait fonctionner: jsfiddle.net/KtbXb/27. Si vous avez d'autres particuliers problème, alors je suggère que vous devriez vous poser une nouvelle question, y compris votre problème en détails.

    InformationsquelleAutor nemesv
  2. 22

    Je pense, j'ai un peu de meilleure solution avec pas de la racine de l'arbre. Veuillez prendre un coup d'oeil:

    http://jsfiddle.net/nonsense66/Bzekr/

    Modèle:

    <script id="treeElement" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'treeElement', foreach: children }">
        </ul>
     </li>
</script>    

<ul data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul>

    Javascript:

    var viewModel = {
    treeRoot: ko.observableArray()
};

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.name = ko.observable(name);
}

var tree = [
    new TreeElement("Russia", [
        new TreeElement("Moscow")
    ]),
    new TreeElement("United States", 
    [
        new TreeElement("New York", [ 
            new TreeElement("Harlem"),
            new TreeElement("Central Park")
        ]) 
    ])
];

viewModel.treeRoot(tree);

ko.applyBindings(viewModel);

    Espère que cela aide!

    InformationsquelleAutor Andrei
  3. 7

    Ce post a été d'une grande aide pour moi. Je suis toujours à la recherche de nouvelles façons d'utiliser les huitièmes de finale. Je voulais juste ajouter une modification qui est en train de faire exactement ce que nemesv proposé uniquement à l'aide de la ko.plugin de cartographie.

    //Nested javascript object:
var formElementNode = {
    children: [{
        children: [],
        text: 'Child1',
        value: 'Value1'
    }, {
        children: [{
            children: [{
                children: [],
                text: 'Child2.1.1',
                value: 'Value2.1.1'
            }],
            text: 'Child2.1',
            value: 'Value2.1'
        }],
        text: 'Child2',
        value: 'Value2'
    }, {
        children: [],
        text: 'Child3',
            value: 'Value3'
    }],
    text: 'Main',
    value: 'MainValue'
};

//Use ko.mapping to generate viewModel:
var viewModel = ko.mapping.fromJS(formElementNode);
ko.applyBindings(viewModel);

    Comme démontré dans cette jsFiddle.

    InformationsquelleAutor Bradley Trager
  4. 5

    Récursive Liaison Personnalisée

    Une autre solution, après avoir lu que les modèles ont été plus lents, je suis à la recherche d'aller avec récursive de liaison.

    <ul data-bind="nestMe: name"></ul>

    ko.bindingHandlers.nestMe = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var observable = valueAccessor() || { };
        var unwrapped = ko.unwrap(observable);

        ko.utils.setHtml(element, '<li>'+unwrapped+'<ul data-bind="foreach: children"><li data-bind="nestMe: name" /></ul></li>');

    }
};

var rootModel = function(name, children) {
    this.name = ko.observable(name);
    this.children = ko.observableArray(children);
};

var basemodel = new rootModel('test');
basemodel.children.push(new rootModel('aaa',[new rootModel('111'),new rootModel('222')]));
basemodel.children.push(new rootModel('bbb'));
basemodel.children.push(new rootModel('ccc',[new rootModel('333'),new rootModel('444')]));

ko.applyBindings(basemodel);

    Avoir la possibilité de jouer avec les données avant la récursivité devrait venir dans maniable.

    JSFiddle

    • Merci pour cette solution. Il a été utile pour moi. Pourriez-vous partager une ressource sur les modèles sont plus lents?
    • Probablement pas où j'ai lu cela, mais donne un exemple: stackoverflow.com/a/21613221/2438830
    InformationsquelleAutor MrYellow