Question

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).

Answer 1

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/