Question

// create Ember js app
App = Ember.Application.create();

// Create a grand parent view - without using templateName function/property
App.GrandparentView = Ember.View.extend({
  click: function() {
    console.log('Grandparent!');
  }
});

// Create a parent view by using templateName function/property
App.ParentView = Ember.View.extend({
  templateName:"parent-view",          
  click: function() {
    console.log('parent view!');
  }
});

// use the template to render the view content
<script type="text/x-handlebars" >
  {{#view App.GrandparentView}} 
    Click Grandparent View!     
  {{/view}}
</script>

// embed the view inside a div 
<div id="Parent">
  <script type="text/x-handlebars">
    {{view App.ParentView}}
  </script>
</div>

这两种不同的方法如何在ember.js中进行视图渲染。哪个更好，哪个是用例或优势。

Answer 1

首先，不要将您的Ember模板<script>标记放在<div>标记内。这不符合你的期望。

当你使用{{view App.View1}}时，你告诉ember在这里渲染App.View1的实例。它使用的模板将是您在构建App.View时使用的templateName。例如：

<script type="text/x-handlebars" data-template-name="my-template">
  Hello World!
<script>

App.View1 = Ember.View.extend({ templateName: 'my-template' });

当你使用{{#view App.View2}} {{/view}}时，你告诉ember在这里渲染App.View2的实例，但是内联定义模板。 App.View2不具有templateName属性，其模板将位于{{#view}}{{/view}}块内。例如：

{{#view App.View2}}
    Hello World
{{/view}}

App.View2 = Ember.View.extend();

两者都不是优选的，但命名模板允许可重用性并使代码更清洁。结构良好的应用程序将利用两个模板选项。当您只想为同一个视图类提供一次不同的模板时，可以使用匿名/内联模板（App.View2示例）。

ember.js视图渲染有何不同

1 个答案: