guleria
guleria

Reputation: 751

While trying to render two template views in emberjs only the later one renders

I am new to emberjs and I was trying to render two views using two different script tags in markup but only the later one gets rendered.

HTML:

<script type="text/x-handlebars">
  {{view Ember.Select
         contentBinding="App.peopleController"
         selectionBinding="App.selectedPersonController.person"
         optionLabelPath="content.fullName"
         optionValuePath="content.id"}}

  <p>Selected: {{App.selectedPersonController.person.fullName}}
    (ID: {{App.selectedPersonController.person.id}})</p>
</script>
<script type="text/x-handlebars">
  {{#view Ember.Checkbox}}
    Check me!
  {{/view}}
</script>

I have created the fiddle also for this here: jsfiddle

In this case I can only see the check box but can't see the drop-down select view.

Upvotes: 2

Views: 375

Answers (1)

Alexander Petrovich
Alexander Petrovich

Reputation: 538

You must give a name for a template, a template without a name is considered a template for the ApplicationView, and i guess if you have several templates without a name ember choses the last one. So you must do something like so:

<script type="text/x-handlebars" data-template-name="check-box">
   {{#view Ember.Checkbox}}
     Check me!
   {{/view}}
</script>

Here is an example http://jsfiddle.net/zgLCr/419/ - wrapping Ember.Checkbox in another view doesn't make much sense, but it shows how you can name and render your views, although you can place checkbox right inside your ApplicationView's template:

<script type="text/x-handlebars">
   {{view Ember.Select
     contentBinding="App.peopleController"
     selectionBinding="App.selectedPersonController.person"
     optionLabelPath="content.fullName"
     optionValuePath="content.id"}}

   <p>Selected: {{App.selectedPersonController.person.fullName}}
      (ID: {{App.selectedPersonController.person.id}})</p>

   {{#view Ember.Checkbox}}
      Check me!
   {{/view}}
</script>

Upvotes: 1

Related Questions