javascript - ember.js 和 handlebars registerHelper 函数

Question

我打算在我的项目中实现 ember，但我找不到支持基本 Handlebars 功能的方法。

我需要的是在前 4 个

项之后带有
标记的列表。Handlebars 站点建议这样的功能

Ember.Handlebars.registerHelper('list', function(context, options) {
  var ret = "<ul>";
  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + "<li>" + options.fn(context[i]) + "</li>";
    if(i==3){
        ret += '<br id="ok">' 
    }
  }
 return ret + "</ul>";
});

对象:

 var Test = [
    { url: "http://www.yehudakatz.com", title: "Katz Got Your Tongue" },
    { url: "http://www.sproutcore.com/block2", title: "SproutCore Blog" },
    { url: "http://www.sproutcore.com/block", title: "ssss Blog" },
    { url: "http://www.Blog.com/block", title: "BlogBlog" },
  ];

Ember 代码:

App.TestRoute = Ember.Route.extend({
  model: function() {
    return Test;
  }
});

模板:

<script type="text/x-handlebars" id="Test">
    <div>
        <span>test</span>
    </div>
    {{#each model}}
         <a href="{{url}}">{{title}}</a>
    {{/each}} 
  </script>

但结果是，该对象要么被解析为字符串，给出 5 个('model' 单词中的 5 个字母)空迭代(尽管
)。

但是，如果我使用#each，对象被解析，但是我的链接看起来像这样:

 < a href="&lt;script id='metamorph-7-start' type='text/x-placeholder'&gt;&lt;/script&gt;http://www.yehudakatz.com&lt;script id='metamorph-7-end' type='text/x-placeholder'&gt;&lt;/script&gt;"><script id="metamorph-8-start" type="text/x-placeholder"></script>Katz Got Your Tongue<script id="metamorph-8-end" type="text/x-placeholder"></script>< /a>

请给我提示如何破案。

Answer 1

Ember 更改了 handlebars helpers 中的一些内容以启用绑定(bind)，因此这就是为什么您的 html 具有该 metamorph 标签的原因。要使用没有 ember 内容的普通 handlebars 助手，您可以将模板类型更改为 text/x-raw-handlebars:

<script type="text/x-raw-handlebars" id="Test">
    <div>
        <span>test</span>
    </div>    
    {{#list content}}
        <a href="{{url}}">{{title}}</a>
    {{/list}}
</script>

并使用 Handlebars.registerHelper 而不是 Ember.Handlebars.registerHelper:

Handlebars.registerHelper('list', function(context, options) {
  var ret = "<ul>";    
  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + "<li>" + options.fn(context[i]) + "</li>";
    if(i==3){
        ret += '<br id="ok">' 
    }
  }
 return ret + "</ul>";
});

你可以在那个 fiddle http://jsfiddle.net/marciojunior/vzsUN/ 中看到这个 Action

如果您的 url 不需要通过绑定(bind)更新，您可以使用 unbound 查看助手:

 <a {{unbound url}}>{{title}}</a>

否则，您可以使用 bindAttr View 助手:

 <a {{bindAttr href="url"}}>{{title}}</a>

这将创建一个数据属性而不是 metamorph 标签，并且您的 html 不会中断。