Cómo lidiar con las etiquetas en un modelo Ember.js
-
28-10-2019 - |
Pregunta
Tengo un modelo Ember.js que es básicamente una identificación, un título, un cuerpo y etiquetas, donde cada etiqueta tiene una identificación y un título. Aquí está el JSON que estoy alimentando a Ember de Rails:
{"created_at":"2012-02-19T03:28:26Z",
"body":"Example body",
"id":1,
"title":"Example title",
"updated_at":"2012-02-19T03:28:26Z"
"tags" :
{"id":1,
"name":"retweet"},
{"id":2,
"name":"twitter"},
{"id":3,
"name":"social"}
}
Pregunta 1: ¿Cómo puedo modelar las etiquetas en el modelo Ember.js? Si solo hay un campo de "etiquetas" que contiene una matriz JS de etiquetas, o debería haber un campo para cada etiqueta, por lo que habría TAG1, TAG2, TAG3, etc., donde cada campo tiene una matriz de ID y ¿título?
Pregunta 2: En mis plantillas de manillares, ¿cómo puedo usar las etiquetas para vincular cada etiqueta a /tags/{{tag.id}}?
No puedo usar solo <a href="/tags/{{tag.id}}"></a>
Dado que no puede incrustar los valores de Handlebars en un atributo como ese, y no puedo usar {{bindattr}} ya que no puede concatenar cadenas (como /tags /) al valor. Eso me deja con una propiedad calculada (que es la "manera correcta", de acuerdo a esto) para cada etiqueta (por lo que la propiedad calculada "tagUrl" solo devuelve "/tag/" + tag.id
), pero no estoy seguro de cómo hacer esto porque no estoy seguro de cómo se deben almacenar las etiquetas (Pregunta 1 arriba).
Solución
Extender una vista en su código:
App.tagView = Em.View.extend
templateName: "tTagView"
tagURL: (->
'/tag/" + @get('id')
).property()
En tu manillar haz esto
{{#each tags}}
{{view App.tagView content=this}}
{{/each}}
Necesitarás una plantilla
<script id="tTagView" data-template-name='tTagView' type="text/x-handlebars">
<a {{bindAttr href="tagURL"}}>{{Name}}</a>
</script>
Aquí está todo funcionando en un violín:http://jsfiddle.net/herty/12/