Question

我正在使用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"
        }
    ]
}

我的大多数handlbars模板都按预期工作，只有一件事没有，{{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/

有人有线索吗？

Answer 1

要绑定HTML属性（例如href，src，title等），请使用bind-attr helper。所以你的模板应该是：

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

把手不按预期呈现网址

1 个答案: