javascript - component - ember js español

¿Compilar la cadena de plantillas de Ember y ejecutarla programáticamente, sin una aplicación Ember?

Question

Solo quiero ejecutar la cadena de la plantilla contra un objeto y examinar el resultado

Tengo una cadena que es una plantilla. Lo "compilé". Ahora quiero ejecutarlo contra un objeto y examinar el resultado.

Pero esto no funciona:

var template = ''<div>{{#each items}}<div>{{item}}</div>{{/each}}</div>'';
var compiled = Ember.Handlebars.compile(template);
var result = compiled({ items: [1, 2, 3] }); // ERRORS

Lo que quiero obtener es el resultado DOM de ejecutar mi cadena compilada contra un objeto. En otras palabras, un conjunto de elementos DOM que se ve así:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Parece que Ember.Handlebars.compile está muy unido a otras partes de una aplicación Ember, hasta el punto de que espera que se llenen muchas cosas en el contexto que estoy pasando de la función compilada. Todavía tengo que descubrir qué son todas estas cosas, o si hay una mejor manera de crear un contexto para pasar a la función compilada.

Otras cosas:

• No quiero usar manubrios simples "no ámbar".
• Me gustaría evitar la creación de una aplicación Ember si puedo.
• Realmente no quiero responder preguntas sobre "por qué" quiero hacer esto. Esto es lo que quiero hacer. :PAG

Answer 1

¿Por qué quieres hacer esto? ;)

Honestamente, la manera más fácil de hacer esto será crear una vista. Ember conecta un montón de cosas de renderizado sofisticadas cuando llama a compilar debido a la unión de datos, etc., por lo que es difícil crearlo directamente desde la función de compilación (se pasa en un montón de cosas adicionales, como búferes, etc ...)

var view = Ember.View.extend({
  template:Ember.Handlebars.compile(''hello <div>{{#each item in view.items}}<div>{{item}}</div>{{/each}}</div>'')
});

var foo = view.create({ items: [1, 2, 3] });

foo.appendTo(''#blah'');

Ejemplo

http://emberjs.jsbin.com/qeyenuyi/1/edit

// you must wait for all bindings to sync before you can check the contents of #blah:
var empty = $(''#blah'').html(); // this will be empty

Ember.run.next(function(){
  var notEmpty = $(''#blah'').html(); // this will have the proper result in it
});

o puede conectarse a la devolución de llamada didInsertElement

var foo = view.create(blah);

foo.didInsertElement = function(){
  console.log(foo.$().html());
}

foo.appendTo(''#blah'');

http://emberjs.jsbin.com/qeyenuyi/6/edit

Las consolidaciones siguen intactas al crear una plantilla de manillar Ember, por lo que puede modificar el objeto pasado y actualizará la plantilla.

http://emberjs.jsbin.com/qeyenuyi/2/edit