在没有 Ember 应用程序的情况下编译 Ember 模板字符串并以编程方式运行它? [英] Compile Ember template string and running it programmatically, without an Ember application?

问题描述

我只想针对对象运行模板字符串并检查结果

我有一个作为模板的字符串.我已经编译"了它.现在我想对一个对象运行它并检查结果.

但这不起作用:

var template = '<div>{{#each items}}<div>{{item}}</div>{{/each}}

';var 编译 = Ember.Handlebars.compile(template);var 结果 = 编译({ 项目:[1, 2, 3] });//错误

我想得到的是针对对象运行编译后的字符串的 DOM 结果.换句话说，一组看起来像这样的 DOM 元素:

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

看来 Ember.Handlebars.compile 与 Ember 应用程序的其他部分非常紧密地耦合，以至于它期望在我传递给编译函数的上下文中填充很多东西.我还没有弄清楚所有这些东西是什么，或者是否有更好的方法来创建上下文以传递给已编译的函数.

其他:

• 我不想使用普通的非 Ember"把手.
• 如果可以，我想避免创建 Ember 应用程序.
• 我真的不想回答关于为什么"我想这样做的问题.这就是我想要做的.:P

解决方案

为什么要这样做?;)

老实说，最简单的方法是创建一个视图.由于数据绑定等原因，Ember 在调用 compile 时会挂上一堆花哨的渲染内容，因此很难直接从 compile 函数中创建它(它传入了大量附加内容，例如缓冲区等...)

var view = Ember.View.extend({template:Ember.Handlebars.compile('hello 
{{#each item in view.items}}
{{item}}</div>{{/each}}</div>')});var foo = view.create({ 项目:[1, 2, 3] });foo.appendTo('#blah');

示例

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

//您必须等待所有绑定同步，然后才能检查#blah 的内容:var empty = $('#blah').html();//这将是空的Ember.run.next(function(){var notEmpty = $('#blah').html();//这将有正确的结果});

或者你可以连接到 didInsertElement 回调

var foo = view.create(blah);foo.didInsertElement = function(){console.log(foo.$().html());}foo.appendTo('#blah');

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

当您创建 Ember 把手模板时，绑定仍然完好无损，因此您可以修改传入的对象，它会更新模板.

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

I just want to run the template string against an object and examine the result

I have a string that is a template. I've "compiled" it. Now I want to run it against an object and examine the result.

But this doesn't work:

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

What I want to get is the DOM result of running my compiled string against an object. In other words, a set of DOM elements that looks something like this:

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

It appears that Ember.Handlebars.compile is very tightly coupled to other parts of an Ember application, to the point it expects a lot of things to be populated in the context I'm passing ot the compiled function. I have yet to figure out what all of these things are, or if there is a better way to create a context to pass to the compiled function.

Other things:

• I don't want to use plain "non-Ember" Handlebars.
• I'd like to avoid creating an Ember Application if I can.
• I don't really want to answer questions about "why" I want to do this. This is what I want to do. :P

解决方案

Why do you want to do this? ;)

Honestly the easiest way to do this will be to create a view. Ember hooks up a bunch of fancy rendering stuff when it calls compile due to the data binding etc, so it's difficult to create it straight from the compile function (it passes in a slew of additional stuff, like buffers 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');

Example

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

or you can hook up to the didInsertElement callback

var foo = view.create(blah);

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

foo.appendTo('#blah');

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

The bindings are still in tact when you create a Ember handlebars template, so you can modify the object passed in and it will update the template.

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

这篇关于在没有 Ember 应用程序的情况下编译 Ember 模板字符串并以编程方式运行它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！