Ember.js: How do I access a specific item in a CollectionView?

Question

First off I want to say that I really like ember.js. I have tried both Knockout and Angular but found them a bit to obtrusive and everything had to be done their way. I feel like ember allows me a bit more freedom to structure things how you see fit. With that said I have a couple of questions.

1. I would like to do something like the following which obviously doesn't work:

<a href="/item/{{ content.id }}"><h3>{{ content.name }}</h3></a>

Instead I would have to create a binding:

<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>

How do i create the url path in the view? I could easily create a computed property called url on the model but that feels horrible and not very MVC. Do I have to create a new view for the element or register a helper which feels a bit cumbersome?

Here's the complete code:

App = Ember.Application.create();

var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ]

App.itemController = Ember.ArrayController.create({
    content: sampleData,
    removeItem: function(item) {
        this.content.removeObject(item);
    }
});

App.ItemListView = Ember.View.extend({
    itemDetailView: Ember.CollectionView.extend({
        contentBinding: 'App.itemController',
        itemViewClass: Ember.View.extend({
            tagName: 'li',
            url: '' // HOW TO GET '/item/123456789'
            deleteButton: Ember.Button.extend({
                click: function(event) {
                    var item = this.get('content');
                    App.itemController.removeItem(item);
                }
            })
        })
    })
});

<script type="text/x-handlebars">
    {{#view App.ItemListView}}
        <ul id="item-list">
            {{#collection itemDetailView}}
                <div class="item">
                    <a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
                    {{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}}
                </div>
            {{/collection}}
        </ul>
    {{/view}}
</script>

2. I feel that the view "owns" the controller and not the other way around. Shouldn't the view be unaware of which controller it is hooked up to so you can reuse the view? I'm thinking about these to lines in the view:

contentBinding: 'App.itemController',

and

App.itemController.removeItem(item);

How do you structure this?

3. I realize everything is a work in progress and quite new with the name change and all but the documentation is quite unclear. The examples use the old namespace SC and there are lot of things missing on emberjs.com compared to the Sproutcore 2.0 guides, for example collections, arraycontrollers. I read somewhere here that collections will be phased out. Is that true and should I use #each instead?

Thanks for your help and for an awesome framework!

Answer 1

1.) If you want to use <a href="...">, you will need a computed property. It could be on your model or on a view. Another technique would be to use Ember.Button: {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}

2.) Typically you'll want to declare your controller binding in the template, rather than in the view. For example: {{#view App.ItemListView contentBinding="App.itemController"}}

3.) The #collection helper will likely be deprecated, so you should probably use an #each instead.