Geek Answers Handbook

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

Firstly, I want to say that I really like ember.js. I tried both knockout and Angular, but found them a bit intrusive and everything had to be done. I feel that ember allows me a little more freedom to structure things as you see fit. With that said, I have a few questions.

1 . I would like to do something like the following, which obviously does not 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 to create a url in a view? I could easily create a computed url property on the model, but this seems awful and not very MVC. Should I create a new view for the item or register an assistant that feels a little cumbersome?

Here is the full 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, not the other way around. Should an opinion about which controller is connected be displayed so that you can reuse the view? I think about this for the lines in the view:

contentBinding: 'App.itemController',

and

App.itemController.removeItem(item);

How do you structure this?

3 . I understand that everything is in full swing and completely new with a name change, and everything except the documentation is not entirely clear. The examples use the old SC namespace, and emberjs.com has a lot of things compared to Sproutcore 2.0 directories, such as collections, array controllers. I read somewhere that collections will be phased out. Is this true and should I use #each instead?

Thanks for your help and for the amazing structure!

+7
source share
1 answer

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

2.) Usually you need to declare the binding of your controller in the template, not in the view. For example: {{#view App.ItemListView contentBinding="App.itemController"}}

3.) The #collection helper is likely to be deprecated, so use #each .

+4
source

More articles:


All Articles