Plantilla recursiva con js knockout

¿Es posible crear una plantilla recursiva solo con knockout js?

Tengo un object knockout:

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

children es una matriz de FormElementNode.

Quiero dibujarlo y son hijos recursivamente en un nodo de list de jerarquía:

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

¡Gracias!

4 Solutions collect form web for “Plantilla recursiva con js knockout”

Sí KnockOut admite templates recursivas para que pueda hacer reference y representar la misma plantilla dentro de la plantilla.

Un html de ejemplo en su caso se vería así:

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

Demo JSFiddle.

Creo que tengo una solución un poco mejor sin raíz de tree . Por favor echa un vistazo:

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

Modelo:

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

¡Espero eso ayude!

Esta publicación fue de gran ayuda para mí. Siempre estoy encontrando nuevas forms de usar knockout. Solo quería agregar una modificación útil que está haciendo exactamente lo que nemesv propuso solo con el plugin ko.mapping.

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

Como se demuestra en este jsFiddle .

Encuadernación personalizada recursiva

Otra solución, después de leer que las templates eran más lentas, estoy considerando ir con encuadernación recursiva.

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

Tener la oportunidad de jugar con datos antes de la recursion debería ser útil.

JSFiddle

  • mustache.js vs. jquery-tmpl
  • Poner de relieve las mejores prácticas de las templates JS: cómo evitar mezclar JavaScript con HTML
  • Variable global para templates de Jade en node.js
  • Pasar variables a través de manillares parciales
  • Implementación de plantilla Django en javascript?
  • Sirve un file javascript dynamic con nodejs
  • ¿Cuál es una estrategia de trabajo para servir las diéresis generadas por JS y CSS a todas las posibles codificaciones de página de host?
  • ¿Cuál es la diferencia entre handlebar.js y handlebar.runtime.js?
  • Angular filtra un object por sus properties
  • Backbone.js: repoblar o recrear la vista?
  • ¿Hay un operador ternario en handlebars.js?
  • Lectura del valor del button de opción - Angular 2
  • Meteor Startup JQuery DOM Elements Not Ready (JQueryUI Draggable)
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.