使用Ember和Handlebars,如何在模板块中动态声明参数?

时间:2012-09-27 19:04:02

标签: javascript ember.js handlebars.js

例如,我有一个这样的脚本,它定义了一个新的div,用页码注释

<script type="text/x-handlebars" data-template-name="page-template">
    <div class = 'page'>
       The page is  <b>{{ App.pageView_1.pageNumber }}</b>
    <div>
</script>

相应的观点:

App.pageView_1 = App.PageView.create({
    templateName: 'page-template',
    pageNumber: 1,
})

我想动态声明新视图,每个视图都有不同的pageNumber字段和视图名称,所以:

  App.pageView_2 = App.PageView.create({
      pageNumber: 2,
  });

  App.pageView_3 = App.PageView.create({
      pageNumber: 3,
  });

请注意,为清楚起见,省略了templateName字段。

问题是模板块中的参数必须更改为{{App.pageView_2.pageNumber}}等等。

知道如何做到这一点?

3 个答案:

答案 0 :(得分:1)

离布加尔方式更近一点:

{{#each App.pagesController}}
    {{#view App.PageView contextBinding="this"}}
        {{pageNumber}}
    {{/view}}
{{/each}}

对于控制器:

App.pagesController = Em.ArrayController.create({
    content: [{ pageNumber: 1 }, { pageNumber: 2 }, { pageNumber: 3 }]
});

顺便说一下,您可能希望在最初定义视图时设置templateName

答案 1 :(得分:0)

{{view App.pageView pageNumber="2"}}
  {{pageNumber}}
{{/view}}

应该有效但似乎多余。

答案 2 :(得分:0)

好吧,首先声明一个通用视图

App.pageView = Ember.View.extend({
  templateName: "page_template"
  classNames: ['page']
})

page_template.handlebars

The page is {{view.pageNumber}}

现在,您已经声明了这一点,可以在任何地方使用它来执行以下操作:

{{view App.pageView pageNumber="1"}}

这应该可以正常工作......