CODEWITHSUNDEEP
ember.js
Aras
Aras

Reputation: 5926

How can I connect my controller to a view in Ember

I think I have a problem understanding how the data loaded by controller should be binded and become available to the view. For the purpose of this question I have crafted a small example in jsFiddle that uses ember-rest to load data.

As you can see in the jsFiddle, what I want to achieve in this example is to bind my testData to BlockView which is rendered using the blocki template. What is an appropriate way to do this in Ember?

To get an idea of what the fiddle would look like when it is running properly replace the binding to blocksController to directly bind to the testData. I have done this in another version of the jsFiddle.

{{view App.BlockView blockiBinding="App.testData" }}

Of course the blocks render properly in this version -- but that is not how I want to do this. I want to learn how to properly (as recommended by Ember) connect the blockController to the view and get the data from it. In a real scenario the data will be obtained from a REST API and that is why I am using ember-rest in this example.

If you fix that jsFiddle with your ninja moves, please take a few seconds and explain the concept behind how it works. I found it very difficult to obtain up to date information about this. Thanks!

Upvotes: 2

Views: 2578

Answers (2)

rit
rit

Reputation: 2308

You connect a view with a controller by using a) The appropriate naming scheme b) connect the outlets

For example if you have a view BlockView you should have a controller BlockController. Then from the view you can access the content of the controller directly.

App.BlockView = Ember.View.extend({
  templateName: 'block'
});

App.BlockController = Ember.ObjectController.extend({
  block: { name: 'block 1', children: [ {name: 'child1' }, {name: 'child2'}] }
});

<script type="text/x-handlebars" data-template-name="block" >
   <div>Block Name: {{block.name}}</div>
   {{#each child in block.children}}
     <div>Child Name: {{child.name}}</div>
   {{/each}}
</script>

What I also miss in your code example is the router. This one takes care of the appropriate 'glueing' of all the components. Take a look at the router in Trek's tutorial (which is btw up to date and represents the way how an application should be written).

In the router you will define the connectOutlets method in which you load the view that should be rendered into the outlet. And if you stick with the naming scheme from above, you have direct access from your view to the controller

Update

I got your code running with some modifications:

  • You don't need to initiate the controllers on your own. App.initialize() will take care of that for you
  • I modified the resource controller to object controller and removed the resource block but of course this makes no different to ObjectController. Just for basic understanding working with plain ember.js objects makes your life easier.
  • It's in JavaScript not Coffee Script - sorry for that :D

Unfortunately I am not able to create a jsFiddle (don't ask why - no clue :)). So I have added the data to a GIST - https://gist.github.com/3832764.

Update 2

And I also managed to create now a JSFiddle http://jsfiddle.net/qV5wu/2/ :)

Upvotes: 4

Loadx
Loadx

Reputation: 250

Have a read through http://trek.github.com/ and see if that helps you any. From what I'm seeing of the fiddle the example you have is very similar to the one provided in the tutorial.

In particular the area I'd look at is connectOutlet.

Hope that helps.

Upvotes: 0

Related Questions