3 
// 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 中的视图渲染方面是如何工作的。哪一个更可取，一个比另一个的用例或优势是什么。

4

1 回答 1

3

首先，不要将 Ember 模板<script>标签放在标签内<div>。这不会达到你的预期。

当您使用时，{{view App.View1}}您是在告诉 ember 在此处呈现 App.View1 的实例。它使用的模板将是templateName您在构建 App.View 时使用的模板。例子：

<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 示例）。

于 2012-10-03T02:22:15.280 回答