0

我正在使用 ember 和 json api 开始一个小型 Web 项目。

它目前包含一个包含以下内容的页面：

<!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>

我的余烬代码如下：

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,
});

并且 /bookmarks 返回这个 json 结果：

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

我的手把的大部分模板都按预期工作，只有一件事没有，{{link}} 部分创建的内容如<script id='metamorph-2-start' type='text/x-placeholder'></script>http://stackoverflow.com/<script id='metamorph-2-end' type='text/x-placeholder'></script>

您可以看到那里运行的应用程序：http: //sleepy-bastion-5858.herokuapp.com/

有人有线索吗？

4

1 回答 1

5

对于绑定 HTML 属性（例如 href、src、title 等），请使用bind-attr 帮助器。所以你的模板应该是：

  <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>
于 2013-07-21T13:19:01.270 回答