Question

For example, I have a script like this, which defines a new div, annotated with a page number

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

The corresponding view:

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

And I want to dynamically declare new views, each one with a different pageNumber field and view name, so:

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

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

note the templateName field has been omitted for clarity.

The problem is the param within the template block has to change to {{ App.pageView_2.pageNumber }} and so on.

Any idea how this could be done?

Answer 1

A bit closer to the ember way:

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

And for the controller:

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

By the way, you probably want the templateName to be set when the view is originally defined.