Ember.js: ¿Cómo accedo a un elemento específico en un CollectionView?

Question

En primer lugar, quiero decir que realmente me gusta ember.js. Probé tanto Knockout como Angular, pero me parecieron un poco molestos y todo tenía que hacerse a su manera. Siento que la brasa me permite un poco más de libertad para estructurar las cosas como mejor te parezca. Dicho esto, tengo un par de preguntas.

. Me gustaría hacer algo como lo siguiente, que, obviamente, no funciona:

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

lugar que tendría que crear una unión:

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

Cómo creo que la ruta URL en la vista? Podría crear fácilmente una propiedad calculada llamada url en el modelo, pero eso se siente horrible y no muy MVC. ¿Tengo que crear una nueva vista para el elemento o registrar un ayudante que se sienta un poco engorroso?

Aquí está el código completo:

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> 

. Siento que la vista "posee" el controlador y no al revés. ¿No debería la vista ignorar a qué controlador está conectado para que pueda reutilizar la vista? Estoy pensando en estas líneas a la vista:

contentBinding: 'App.itemController',

y

App.itemController.removeItem(item);

¿Cómo se estructuran esta?

. Me doy cuenta de que todo es un trabajo en progreso y bastante nuevo con el cambio de nombre y todo, pero la documentación no está clara. Los ejemplos usan el antiguo espacio de nombres SC y faltan muchas cosas en emberjs.com en comparación con las guías de Sproutcore 2.0, por ejemplo colecciones, controladores de array. Leí en algún lugar aquí que las colecciones se eliminarán. ¿Es cierto y debería usar #each en su lugar?

¡Gracias por su ayuda y por un marco increíble!

Answer 1

1.) Si desea utilizar <a href="...">, necesitará una propiedad calculada. Podría ser en su modelo o en una vista. Otra técnica sería utilizar Ember.Button: {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}

2.) Por lo general, querrá declarar el enlace de su controlador en la plantilla, en lugar de en la vista. Por ejemplo: {{#view App.ItemListView contentBinding="App.itemController"}}

3.) El helper #collection probablemente estará obsoleto, por lo que probablemente debería usar un #each.