简体   繁体   English

使用Ember.js和Handlebars,将模板绑定到类视图与视图实例之间有什么区别?

[英]Using Ember.js and Handlebars, what is the difference between binding a template to a class view vs instance of view?

Case I.Binding template to instance of view. 案例I.绑定模板到视图实例。

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) : 然后我可以将一个视图实例绑定到它并附加到文档(为简单起见,param名称在视图中声明,而不是绑定到某个控制层):

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. 引用“此部件呈现:”模板实际呈现,但{{name}}标记未呈现。 I have no idea why. 我不知道为什么。

Case III. 案例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. 案例1呀,差不多。 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') . 视图是渲染(我们假设上下文是视图)然后当我们看到{{name}}这将等同于instanceView.get('name')

Case 2 Anonymous templates do not change context. 案例2匿名模板不会更改上下文。 When you define a template inside of {{#view}} the context won't change. {{#view}}内定义模板时,上下文不会更改。 To get the view's context that was used with the {{#view}} helper you'll need to use view.name . 要获取与{{#view}}帮助程序一起使用的视图上下文,您需要使用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). 案例3这个例子没有任何意义,应该有一个断言失败的Ember(非缩小版本)。 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. 如果这是你想要的意思,请你提供一个用例,因为你可能想要完成一个更简单的方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM