javascript ember.js

javascript - Seleccione ver plantilla por tipo de modelo/valor de objeto usando Ember.js



(2)

Basado en la solución de @rlivsey, agregué la funcionalidad para cambiar la plantilla cuando cambia una propiedad, ver http://jsfiddle.net/pangratz666/ux7Qa/

App.ItemView = Ember.View.extend({ templateName: function() { var name = Ember.getPath(this, ''content.name''); return (name.indexOf(''foo'') !== -1) ? ''foo-item'' : ''bar-item''; }.property(''content.name'').cacheable(), _templateChanged: function() { this.rerender(); }.observes(''templateName'') });

Me gustaría almacenar diferentes objetos en la misma matriz de contenido de controlador y renderizar cada uno usando una plantilla de vista apropiada, pero idealmente la misma vista.

Estoy produciendo objetos de lista usando el código a continuación. Actualmente son idénticos, pero me gustaría poder usar otros diferentes.

<script type="text/x-handlebars"> {{#each App.simpleRowController}} {{view App.SimpleRowView class="simple-row" contentBinding="this"}} {{/each}} </script>

Una versión reducida de la vista está debajo. Las otras funciones que no he incluido podrían usarse con cualquiera de los objetos, independientemente del modelo. Entonces, idealmente, tendría una vista (aunque he leído algunos artículos sobre mixinas que podrían ayudar si no fuera así).

<script> App.SimpleRowView = Em.View.extend({ templateName: ''simple-row-preview'', }); </script>

Mis primeras pruebas para permitir diferentes tipos de objetos terminaron con muchas condiciones en ''simple-row-preview'', ¡se veía terrible!

¿Hay alguna manera de controlar dinámicamente el templateName o la vista utilizada mientras se itera sobre mi matriz de contenido?

ACTUALIZAR

Muchas gracias a los dos encuestados. El código final en uso en la vista está debajo. Algunos de mis modelos son similares, y me gustó la idea de poder cambiar de plantilla (o una especie de ''estado'') en mi aplicación.

<script> App.SimpleRowView = Em.View.extend({ templateName: function() { return Em.getPath(this, ''content.template''); }.property(''content.template'').cacheable(), _templateChanged: function() { this.rerender(); }.observes(''templateName''), // etc. }); </script>


Puede hacer que templateName sea una propiedad y luego determinar qué plantilla usar en función del contenido.

Por ejemplo, esto usa instanceof para establecer una plantilla basada en el tipo de objeto:

App.ItemView = Ember.View.extend({ templateName: function() { if (this.get("content") instanceof App.Foo) { return "foo-item"; } else { return "bar-item"; } }.property().cacheable() });

Aquí hay un violín con un ejemplo práctico de lo anterior: http://jsfiddle.net/rlivsey/QWR6V/