Ember.js和handlebars每个助手,与子视图

我triyng在我的{{#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>

我似乎无法从每个视图帮助器访问父视图(或实际上访问除被迭代对象的属性之外的任何其他视图)。

我提出的这些拙劣的解决方法是:

  • 将我想用的视图添加到正在迭代的项目中。
  • 要么

  • 在App.myListView中创建一个collectionView
  • 在该集合视图类中创建一个itemViewClass视图
  • 在itemViewClass中移动itemButton视图
  • 将{{#each}}替换为{{#collection}}
  • 要么

  • 为迭代创建一个自定义的handlebars助手。
  • 这两种选择都很糟糕。 当然,除了创建2个新类(并深入嵌套4个视图)之外,还有一个更好的替代方法就是遍历列表。 有替代车把帮手,我可以使用吗?


    变通办法实施

    选项#1:修改内容数组

    http://jsfiddle.net/FQEZq/3/缺点:不得不将视图添加到每个模型实例只是为了迭代。

    选项#2:自定义集合视图

    http://jsfiddle.net/ST24Y/1/缺点:现在你有两个额外的视图,你不需要/想要的,而较少控制标记。 从子视图到父实例的引用现在需要parentView.parentView.parentView。


    #each对你的需求太有限了。 如果您愿意将全局路径用于要嵌套在#each的视图,则可以使其工作。 否则,您的收藏视图方法是最好的。 将视图添加到模型实例可能会让应用程序设计变得非常激烈,所以我会避免这种情况。

    保持模板清洁的一个想法是利用Ember.View属性,如:

  • collectionView - 返回最近的祖先是一个Ember.CollectionView
  • itemView - 返回最接近的祖先,它是Ember.CollectionView的直接子Ember.CollectionView
  • contentView - 返回具有属性内容的最近的祖先。

  • 这里的大事 - 选项。

    挂钩为您想如何使用模板可用。 这些是:

    <-- 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

    链接地址: http://www.djcxy.com/p/10565.html

    上一篇: Ember.js and handlebars each helper, with subviews

    下一篇: Controller wrapping in panel