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>

これらの2つの異なるアプローチは、ember.jsでのビューレンダリングに関してどのように機能しますか。どちらが望ましいか、そして一方が他方よりも優れているユースケースまたは利点は何ですか。

4

1 に答える 1

3

<script>まず、Emberテンプレートタグをタグ内に配置しないでください<div>。それはあなたが期待することをしません。

使用するとき{{view App.View1}}は、ここでApp.View1のインスタンスをレンダリングするようにemberに指示しています。使用するテンプレートは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}}する場合、ここでApp.View2のインスタンスをレンダリングするようにemberに指示しますが、テンプレートをインラインで定義します。App.View2にはプロパティがなく、そのテンプレートはブロックtemplateName内にあるものになります。{{#view}}{{/view}}例：

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

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

どちらも好ましくありませんが、名前付きテンプレートは再利用性を可能にし、コードを少しすっきりさせます。適切に構造化されたアプリは、両方のテンプレートオプションを利用します。匿名/インラインテンプレート（App.View2の例）は、同じビュークラスに一度だけ異なるテンプレートを提供する場合に使用できます。

于 2012-10-03T02:22:15.280 に答える