Ember.js和把手每個助手，帶有子視圖

Question

我想在我的{{#each}}模板塊中使用視圖助手，而不使用全局路徑（我的控制器創建並銷毀自己的視圖）。

例子。 給定具有myList數組屬性的視圖和itemButton子視圖：

這會奏效

<script type="text/x-handlebars" name="my-list-view">
{{#each myList}} <!-- App.myListView.myList -->

    {{view App.myListView.itemButton}} {{title}}

{{/each}}
</script>

這不會：

<script type="text/x-handlebars" name="my-list-view">
{{itemButton}} <!-- works fine outside the each -->
{{#each myList}}

    {{view itemButton}} {{title}} <!-- itemButton view not found -->

{{/each}}
</script>

我似乎無法從每個視圖助手訪問父視圖（或者實際上訪問除了被迭代的對象的屬性之外的任何東西）。

我提出的hacky解決方法是：

• 將我想要使用的視圖添加到我正在迭代的項目中。

要么

1. 在App.myListView中創建collectionView
2. 在該集合視圖類中創建itemViewClass視圖
3. 在itemViewClass中移動itemButton視圖
4. 將{{#each}}替換為{{#collection}}

要么

• 為迭代創建自定義手柄幫助器。

這兩個選項看起來都很糟糕。 當然，除了創建2個新類（並且深度嵌套4個視圖）之外，還有一個更好的選擇，只是迭代一個列表。 我可以使用替換車把幫手嗎？

---

解決方法實現

選項＃1：修改內容數組

http://jsfiddle.net/FQEZq/3/缺點：必須將視圖添加到每個模型實例，僅用於迭代。

選項＃2：自定義集合視圖

http://jsfiddle.net/ST24Y/1/缺點：現在您有兩個額外的視圖，您不需要/想要，並且對標記的控制較少。 從子視圖到父實例的引用現在需要parentView.parentView.parentView。

Answer 1

#each對您的要求太有限了。 如果您願意使用要在#each嵌套的視圖的全局路徑，則可以使其工作。 否則，您的集合視圖方法是最好的。 將視圖添加到模型實例可能會讓您的應用程序設計變得凶悍，所以我會避免這種情況。

保持模板清潔的一個想法是利用Ember.View屬性，例如：

• collectionView - 返回最近的祖先，即Ember.CollectionView
• itemView - 返回最近的祖先，該祖先是Ember.CollectionView的直接子Ember.CollectionView
• contentView - 返回具有屬性內容的最近祖先。

Answer 2

這里最重要的是 - 選項。

您可以使用有關如何使用模板的掛鈎。 這些是：

<-- render templates/name.js -->
{{partial 'name'}}

<-- render views/name.js -->
{{view 'name'}}

<-- render views/name1.js with controllers/name2.js -->
{{render 'name1' 'name2'}}

<!-- see also: -->
{{output}}
{{output 'named'}}
{{yield}}

初始模板的示例變體顯示4個不同的選項：

<script type='text/x-handlebars' data-template-name='my-list-view'>
  <h2>Option 1</h2>

  {{#each myList}}
    {{! the 2nd parameter will look for itemButtonController }}
    {{render 'itembutton' itemButton}}
  {{/each}}

  <h2>Option 2</h2>
  {{#each myList}}
    {{! using an Ember Component }}
    {{#item-button }}
      some static text OR {{dynamic}}
    {{/item-button}}
    <!-- in component/item-button.hbs add {{yield}} for where you want the static content to output -->
  {{/each}}

  <h2>Option 3</h2>
  {{#each myList}}
    {{! if the button is to be a link }}
    {{#link-to 'route' parameter tagName='button' classNames='btn'}}
      {{title}}
    {{/link-to}}
  {{/each}}

  <h2>Option 4</h2>
  <p>Ludicrous example showing almost every reference option!</p>

  {{! focus the context on subview data }}
  {{#with someArrayOrCollectionOfView}}
    {{! prepend type to add context - here returning back up to this view's properties }}
    {{#each view.myList}}
      {{! this is equivalent to someArrayOrCollectionOfView[x].name }}
      {{name}}

      {{! a button that hooks in route, model, and 2 controllers, and applies a target for the output when clicked }}
      {{#link-to 'page' controllers.page.nextPage target='outlet' tagName='button' disabledWhen=controller.disableNext }}
        {{model.buttonName}}
      {{/link-to}}
    {{/each}}
  {{/with}}

  {{! generic default target (automatic) }}
  {{outlet}}

  {{! example of a named target }}
  {{outlet 'footerlinks'}}
</script>

嗯...參考進一步閱讀： Ember.Handlebars.helpers