CODEWITHSUNDEEP
jsonember.jshandlebars.js
Manuel Leduc
Manuel Leduc

Reputation: 1919

Handlebars does not render url as expected

I'm starting a small web project using ember and a json api.

It contains currently a single page with following content :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="/stylesheets/ui-darkness/jquery-ui-1.10.3.custom.min.css">
  </head>
  <body>
    <div class="container">
      <script type="text/x-handlebars" data-template-name="index">
        <h1>Bookmarks</h1>{{#each controller}}
        <div class="span-4"><a href="{{link}}">{{title}}</a>
          <p>{{description}}</p>
        </div>{{/each}}
      </script>
      <script type="text/javascript" src="/javascripts/require.js" data-main="javascripts/main"></script>
    </div>
  </body>
</html>

My ember code is the following :

App = Ember.Application.create();
App.Router.map(function() {
    this.resource('index', { path: '/' });
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return App.Bookmark.find();
    }
});

App.Bookmark = DS.Model.extend({
    title: DS.attr('string'),
    link: DS.attr('string'),
    description: DS.attr('string'),
});
App.Store = DS.Store.extend({
    revision: 13,
});

And /bookmarks return a this json result :

{
    "bookmarks": [
        {
            "_id": "51ebd06a5810509f703e2504",
            "title": "Stackoverflow",
            "link": "http://stackoverflow.com/",
            "description": "Q&A"
        }
    ]
}

Most of my handlbars's template works as expected, and only a thing does not, the {{link}} part creates content such as <script id='metamorph-2-start' type='text/x-placeholder'></script>http://stackoverflow.com/<script id='metamorph-2-end' type='text/x-placeholder'></script>

You can see the application running there : http://sleepy-bastion-5858.herokuapp.com/

Does anybody have a clue ?

Upvotes: 0

Views: 671

Answers (1)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10077

For binding HTML attributes (such as href, src, title, etc.), use the bind-attr helper. So your template should be:

  <script type="text/x-handlebars" data-template-name="index">
    <h1>Bookmarks</h1>

    {{#each controller}}
      <div class="span-4">
        <a {{bind-attr href="link"}}>{{title}}</a>
        <p>{{description}}</p>
      </div>
    {{/each}}
  </script>

Upvotes: 5

Related Questions