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

  • Herencia de plantilla de Vuejs
  • Elegir la herramienta de templates de interfaz de usuario correcta - dust.js?
  • un nuevo enfoque para el desarrollo web: request de herramientas y recomendaciones de componentes
  • sugerencias de templates javascript / jquery
  • Usa templates de polvo con js angulares
  • ¿Cómo pasar las properties de un object como los locales a una inclusión en Jade?
  • En dust.js, ¿el valor inicial de $ idx no se puede basar en cero?
  • ¿Qué tan lento es el motor de templates de JavaScript de John Resig?
  • Recursión con doT.js
  • configurar el primer button de opción está marcado en la plantilla del manillar
  • ¿Qué es la precompilation de templates de JavaScript?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.