[英]How to compile inline HTMLBars templates?
I have an inline template (template in JavaScript) that I used to compile like so (where temp
is a Handlebars string): 我有一个用于编译的内联模板(JavaScript中的模板)(其中
temp
是Handlebars字符串):
var template = Handlebars.compile(temp);
template({model: results}); // Gets the HTML
I'm trying to use HTMLBars instead, but can't quite figure it out. 我正在尝试使用HTMLBars,但不能完全弄清楚。 I did the following:
我做了以下工作:
var template = Ember.HTMLBars.compile(temp);
template({model: results}); // Throws an error that template isn't a function
How do I go about getting the HTML back from the HTMLBars template. 如何从HTMLBars模板取回HTML。 I also tried:
我也尝试过:
var template = Ember.HTMLBars.compile(temp);
Ember.HtmlBars.template(template, {model: results});
Which doesn't error, but also doesn't use the model when rendering the HTML. 呈现HTML时,这不会出错,但是也不会使用模型。 I think I'm close, but can't quite figure out how to inject the model.
我想我已经接近了,但是还不太清楚如何注入模型。
HTMLBars doesn't produce functions like Handlebars did. HTMLBars不会像Handlebars那样产生函数。 Handlebars was a string templating language: you compile a string to a template function, then run that function to produce a string.
车把是一种字符串模板语言:您将字符串编译为模板函数,然后运行该函数以生成字符串。 HTMLBars compiles a string into a template but the template doesn't produce a string, it produces DOM nodes.
HTMLBars将字符串编译成模板,但是模板不生成字符串,而是生成DOM节点。 The simple answer is that you're not going to be able to do the same things with HTMLBars as you did with Handlebars.
简单的答案是,您将无法使用HTMLBars完成与Handlebars相同的操作。 I suggest either adding another string templating library to your code (maybe Handlebars), or letting a view handle the HTMLBars template as seen in this question .
我建议您在代码中添加另一个字符串模板库(也许是Handlebars),或者让视图处理HTMLBars模板,如本问题所示 。
And if you're curious, here's what an HTMLBars template object looks like after being compiled (gotten from a JSBin console dump): 而且,如果您很好奇,那么下面就是编译后的HTMLBars模板对象的样子(从JSBin控制台转储中得到):
[object Object] {
blockParams: 0,
build: function build(dom) {
var el0 = dom.createDocumentFragment();
var el1 = dom.createTextNode("");
dom.appendChild(el0, el1);
var el1 = dom.createTextNode("");
dom.appendChild(el0, el1);
return el0;
},
cachedFragment: null,
hasRendered: false,
isHTMLBars: true,
isMethod: false,
isTop: true,
render: function render(context, env, contextualElement) {
var dom = env.dom;
var hooks = env.hooks, content = hooks.content;
dom.detectNamespace(contextualElement);
var fragment;
if (env.useFragmentCache && dom.canClone) {
if (this.cachedFragment === null) {
fragment = this.build(dom);
if (this.hasRendered) {
this.cachedFragment = fragment;
} else {
this.hasRendered = true;
}
}
if (this.cachedFragment) {
fragment = dom.cloneNode(this.cachedFragment, true);
}
} else {
fragment = this.build(dom);
}
if (this.cachedFragment) { dom.repairClonedNode(fragment,[0,1]); }
var morph0 = dom.createMorphAt(fragment,0,1,contextualElement);
content(env, morph0, context, "foo");
return fragment;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.