validar validacion recorrer objetos objeto metodos lista funciones formularios formulario ejemplos crear con array agregar javascript templates handlebars.js

recorrer - validacion de formularios con javascript ejemplos



manubrios: ¿es posible acceder al contexto principal de forma parcial? (7)

A partir de 2.0.0 partials ahora admite pasar valores .

{{#each items}} {{> item-template some_parent_var=../some_parent_var}} {{/each}}

Me tomó un tiempo encontrar esto, ¡espero que también sea útil para otra persona!

Tengo una plantilla de manillar que carga un parcial para un subelemento.

Tendría que acceder a una variable desde el contexto principal en la plantilla de llamada, desde dentro del parcial. .. no parece resolver nada dentro del parcial.

El código simplificado es el siguiente:

la plantilla

{{#each items}} {{> item-template}} {{/each}}

el parcial

value is {{value}}

(obviamente el código real es más complicado pero es el mismo principio, dentro del parcial .. parece no estar definido).

Para mostrar que no está definido, he usado un ayudante muy simple que es así:

Handlebars.registerHelper(''whatis'', function(param) { console.log(param); });

y actualizó el código anterior a esto:

plantilla actualizada

{{#each items}} {{whatis ..}} <-- Console shows the correct parent context {{> item-template}} {{/each}}

parcial actualizado

{{whatis ..}} <-- Console shows "undefined" value is {{value}}

¿Hay alguna forma de resolver ese problema? ¿Me estoy perdiendo de algo?

EDITAR: Hay un problema abierto relacionado con esta pregunta en el proyecto github de manubrios

Creé una función Helper que incluye las claves / valores principales dentro del subcontexto bajo la clave parentContext.

http://jsfiddle.net/AndrewHenderson/kQZpu/1/

Nota: subrayado es una dependencia.

Handlebars.registerHelper(''eachIncludeParent'', function ( context, options ) { var fn = options.fn, inverse = options.inverse, ret = "", _context = []; $.each(context, function (index, object) { var _object = $.extend({}, object); _context.push(_object); }); if ( _context && _context.length > 0 ) { for ( var i = 0, j = _context.length; i < j; i++ ) { _context[i]["parentContext"] = options.hash.parent; ret = ret + fn(_context[i]); } } else { ret = inverse(this); } return ret;

});

Para ser utilizado de la siguiente manera:

{{#eachIncludeParent context parent=this}} {{> yourPartial}} {{/eachIncludeParent}}

Acceda a los valores de contexto padre en su parcial usando {{parentContext.value}}

Fiddle de trabajo (inspirado en la solicitud de extracción de manillares # 385 de AndrewHenderson) http://jsfiddle.net/QV9em/4/

Handlebars.registerHelper(''include'', function(options) { var context = {}, mergeContext = function(obj) { for(var k in obj)context[k]=obj[k]; }; mergeContext(this); mergeContext(options.hash); return options.fn(context); });

Así es como configuraría la plantilla principal:

{{#each items}} {{#include parent=..}} {{> item-template}} {{/include}} {{/each}}

Y el parcial:

value is {{parent}}

La forma más fácil de pasar el contexto principal al parcial es hacer el ciclo dentro del parcial. De esta forma, el contexto principal se pasa de forma predeterminada y cuando se realiza el ciclo dentro del parcial, la convención {{../variable}} puede acceder al contexto padre.

ejemplo violín aquí .

Los datos

{ color: "#000" items: [ { title: "title one" }, { title: "title two" }, ] }

La plantilla

<div class="mainTemplate"> Parent Color: {{color}} {{> partial}} </div>

El parcial

<div> {{#each items}} <div style="color:{{../color}}"> {{title}} </div> {{/each}} </div>

Necesitaba atributos de forma dinámica para algo como esto ...

{{#each model.questions}} <h3>{{text}}</h3> {{#each answers}} {{formbuilder ../type id ../id text}} {{/each}} {{/each}}

y un ayudante como tal ...

Handlebars.registerHelper(''formbuilder'', function(type, id, qnum, text, options) { var q_type = options.contexts[0][type], a_id = options.contexts[1].id, q_number = options.contexts[0][qnum], a_text = options.contexts[1].text; return new Handlebars.SafeString( ''<input type='' + q_type + '' id='' + a_id + '' name='' + q_number + ''>'' + a_text + ''</input><br/>'' ); });

Que produce ...

<input type="checkbox" id="1" name="surveyQ0">First question</input>

Mi modelo es una gran cantidad de arreglos y objetos mezclados. Lo que es digno de mención es que usar ''../'' como ''../type'', pasa en el modelo padre como el contexto, y sin él, como con ''id'', pasa en el modelo actual como el contexto.

Por si acaso alguien tropieza con esta pregunta. Esta funcionalidad existe ahora en manubrios.

Hacer esto:

{{#each items}} {{! Will pass the current item in items to your partial }} {{> item-template this}} {{/each}}