编程语言
首页 > 编程语言> > Javascript-使用Ember.js和Handlebars,将模板绑定到类视图与视图实例之间有什么区别?

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

作者:互联网

案例一:将模板绑定到视图实例.

例如,假设我有一个模板:

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

然后,我可以将视图实例绑定到该实例并附加到文档(为简单起见,在视图中声明参数名称,而不是绑定到某些控制层):

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 }}
        This part renders: {{ name }} 
    {{ /view }}
</script>

请注意,当我这样做时,由于某种原因,这是行不通的.模板中的引号“ This part renders:”实际上是渲染的,但是{{name}}标签没有渲染.我不知道为什么.

情况三. template绑定到类视图,命名模板.

另外,如果我将上面的模板命名为:

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

并将视图更改为

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

什么都没有呈现.同样,我看不到这里发生了什么.

解决方法:

情况1
是的.视图正在渲染(并且我们假设上下文是视图),那么当我们看到{{name}}时,这等效于instanceView.get(‘name’).

情况二
匿名模板不会更改上下文.在{{#view}}内定义模板时,上下文不会更改.要获取与{{#view}}助手一起使用的视图上下文,您需要使用view.name.例如:

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>

情况3
这个例子没有意义,并且可能应该使用Ember(非最小版本)使声明失败.您正在定义一个使用模板的视图,然后在该模板内部使用匿名模板再次渲染该视图.如果这是您想要的含义,那么请您提供一个用例,因为您可能会尝试一种更简单的方法来完成.

标签:handlebars-js,ember-js,javascript
来源: https://codeday.me/bug/20191031/1978721.html