Ember.js Render multiple views inside static HTML

0
votes

I'm new to Ember and I'm stuck trying to render views. The application in context is not a single page application but so far Ember has been playing nice until I started dealing with views.

I'm trying to render more than one view on a single page (which is like a dashboard and has tons of static HTML and a few containers, one for each view).

Sample HTML: Let's say I would like to render two lists, one inside the "left-container" div and the other inside the right container. 

<div class="static-header></div>
<!-- more static content goes here -->
<div id="left-container"></div>
<!-- more static content goes here -->
<div id="right-container"></div>
...

I've tried creating different views and inserting them using the appendTo method (which is described in the Defining a View section of Ember guides) but it throws the error:

Container was not found when looking up a views template. This is most likely due to manually instantiating an Ember.View. See: http://git.io/EKPpnA

and I couldn't find my way using the link that it points to.

Ember code:

var App = Ember.Application.create({});
App.HomeViewLeft = Ember.View.extend({    
    templateName: 'home-left',
});

var view = App.HomeViewLeft.create();
view.appendTo('#left-container');

I have also tried using a ContainerView as described in Ember api docs:

App.HomeViewLeft = Ember.View.extend({    
    templateName: 'home-left',
});

var containerView = Ember.ContainerView.create({
classNames: ['container-view'],
});

containerView.pushObject(App.HomeViewLeft.create());
containerView.appendTo('left-container');

But I get the same error.

How should I render each view inside the #left-container and #right-container respectively? Thanks in advance.

2
javascriptember.js

2 Answers

0
votes

Template:

<div id="here"></div>

<script type="text/x-handlebars" data-template-name="components/my-foo">
  {{text}}
</script>

JS:

App = Ember.Application.create({});

Ember.Application.initializer({
  name: 'stand-alone-components',

  initialize: function(container, application) {
    App.MyFooComponent.create({text: 'Hello World', container: container}).appendTo('#here');
  }
});

App.MyFooComponent = Ember.Component.extend({
  init: function() {
    this._super();
    this.set('layout', Ember.TEMPLATES['components/my-foo']);
  }
});

http://emberjs.jsbin.com/nekowidera/1/edit?html,js,output

-1
votes

It looks like you are trying to make views behave like partials

Move anything static into a partial and include it in your main template like so:

{{partial "header"}}

The lists you want to render can be turned into a component (if the only thing that changes in them is the data).

So you end up with a single view that contains partials and components:

<div class="static-header>{{partial "header"}}</div>
{{partial "static-content"}}
<div id="left-container">{{list-component data=firstList}}</div>
{{partial "static-content"}}
<div id="right-container">{{list-component data=secondList}}</div>
...