使用Ember.js和Handlebars，将模板绑定到类视图与视图实例之间有什么区别？ [英] Using Ember.js and Handlebars, what is the difference between binding a template to a class view vs instance of view?

问题描述

例如，假设我有一个模板：

 < script type =text / x-handlebarsdata-template-name =instance-template> 
< b>名称：< / b> {{name}} 
< / script> 
  

然后，我可以绑定一个视图实例并附加到文档（为了简单起见，param名称声明为视图，而不是绑定到某个控件层）：

  App.instanceView = Ember.View.create {
 templateName：'instance-template'，
 name：'hello world'
}）。append（）; 
  

这里幕后究竟发生了什么？通过指定一个模板名称，这个视图的这个实例是以某种方式使用模板，并用后台传递的参数进行编译？

案例二。绑定模板到类视图，模板未命名。

但是，如果我想将模板绑定到类视图，例如：

  App.ViewClass = Ember.View.extend（{
 name：'hello world'，
}）; 
  

文档使用此表单的模板：

 < script type =text / x-handlebars> 
 {{#view App.ClassView}} 
这部分渲染：{{name}} 
 {{/ view}} 
< / script> 
  

请注意，当我这样做，由于某种原因，这不工作。引用这部分渲染：在模板中实际呈现，但是{{name}}标签未被呈现。我不知道为什么。

案例三。模板绑定到类视图，模板命名。

另外，如果我将上面的模板命名为：

 < script type =text / x-handlebarsdata-template-name ='class-template'> 
 {{#view App.ClassView}} 
这部分渲染：{{name}} 
 {{/ view}} 
< / script> 
  

并将视图更改为

  App.ViewClass = Ember.View.extend（{
 templateName：'class-template'，
 name：'hello world'，
}）; 
  

根本没有渲染。我再也看不到这里发生了什么。

解决方案

案例1
几乎相当。视图是渲染（并且我们假设上下文是视图），那么当我们看到 {{name}} 这将相当于 instanceView。 get（'name'）。

案例2
匿名模板不会更改上下文。当您在 {{＃view}} 内定义模板时，上下文不会更改。要获取与 {{view}} 帮助器一起使用的视图的上下文，您需要使用 view.name 。例如：

  App.ViewClass = Ember.View.extend（{
 name：'hello world'，
}）; 
 
< script type =text / x-handlebars> 
 {{name}}<！ - 假装这是别的东西 - > 
 {{#view App.ClassView}} 
这部分呈现：{{name}}<！ - 别的东西 - > 
 {{view.name}}<！ - hello world - > 
 {{/ view}} 
< / script> 
  

案例3
这个例子没有任何意义，有一个断言失败与Ember（非最小版本）。您正在定义使用模板的视图，然后在该模板内再次使用匿名模板呈现相同的视图。如果这是你想要的意思，你可以提供一个用例，因为可能有一个更简单的方法去做你想要完成的事情。

Case I.Binding template to instance of view.

For example, let's say I have a template:

    <script type="text/x-handlebars" data-template-name="instance-template">
        <b> Name: </b> {{ name }}
    </script>

I can then bind an instance of view to it and append to the document ( for simplicity sake the param name is declared in view, as opposed to binding to some control layer) :

App.instanceView = Ember.View.create({
    templateName: 'instance-template',
    name: 'hello world'
}).append();

What exactly is going on behind the scenes here? By specifying a template name, is this instance of view somehow taking a template and compiling it with the parameters passed in the background?

Case II. Binding template to class view, template not named.

If, however, I want to bind a template to a class view such as:

App.ViewClass = Ember.View.extend({
    name: 'hello world',
});

The documentation uses a template of this form:

<script type="text/x-handlebars">
    {{ #view App.ClassView }}
        This part renders: {{ name }} 
    {{ /view }}
</script>

Please note, when I do this, for some reason this does not work. The quote 'This part renders: ' in the template actually renders, however the {{ name }} tag is not rendered. I have no idea why.

Case III. template bind to class view, template is named.

In addition, if I name the template above:

<script type="text/x-handlebars" data-template-name = 'class-template'>
    {{ #view App.ClassView }}
        This part renders: {{ name }} 
    {{ /view }}
</script>

and change the view to

App.ViewClass = Ember.View.extend({
    templateName: 'class-template',
    name: 'hello world',
});

nothing renders at all. Again I do not see what is going on here.

解决方案

Case 1 Yah pretty much. The view is rendering (and we are assuming the context is the view) then when we see {{name}} this will be equivalent to instanceView.get('name').

Case 2 Anonymous templates do not change context. When you define a template inside of {{#view}} the context won't change. To get the view's context that was used with the {{#view}} helper you'll need to use view.name. For example:

App.ViewClass = Ember.View.extend({
    name: 'hello world',
});

<script type="text/x-handlebars">
    {{name}} <!-- lets pretend this is "something else" -->
    {{#view App.ClassView}}
        This part renders: {{name}} <!-- "something else" -->
        {{view.name}} <!-- "hello world" -->
    {{/view}}
</script>

Case 3 This example makes no sense and should probably have an assertion fail with Ember (non minified version). You are defining a view that uses a template, then inside that template rendering that same view again with an anonymous template. If this is you intended meaning could you please provide a use case because there is probably a much simpler way to go about waht you are trying to accomplish.

这篇关于使用Ember.js和Handlebars，将模板绑定到类视图与视图实例之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！