Reputation: 5917
I have an Ember.js model that's basically just an ID, a title, a body, and tags, where each tag has an ID and a title. Here's the JSON I'm feeding Ember from 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"}
}
Question 1: How can I model the tags in the Ember.js model? Should there just be one "tags" field that contains a JS array of tags, or should there be one field for each tag, so there'd be tag1, tag2, tag3, etc., where each field has an array of ID and title?
Question 2: In my Handlebars templates, how can I use the tags to link each tag to /tags/{{tag.id}}?
I can't just use <a href="/tags/{{tag.id}}"></a>
since you can't embed Handlebars values in an attribute like that, and I can't use {{bindAttr}} since you can't concatenate strings (like /tags/) to the value. That leaves me with a computed property (which is the "right way", according to this) for each tag (so the computed property "tagurl" would just returns "/tag/" + tag.id
), but I'm not sure how to do this because I'm not sure how tags should be stored (question 1 above).
Upvotes: 2
Views: 1138
Reputation: 842
Extend a view in your code:
App.tagView = Em.View.extend
templateName: "tTagView"
tagURL: (->
'/tag/" + @get('id')
).property()
In your handlebars do this
{{#each tags}}
{{view App.tagView content=this}}
{{/each}}
You'll need a template
<script id="tTagView" data-template-name='tTagView' type="text/x-handlebars">
<a {{bindAttr href="tagURL"}}>{{Name}}</a>
</script>
Here is everything working in a fiddle: http://jsfiddle.net/herTY/12/
Upvotes: 1