javascript - ember.js 和车把 registerHelper 函数

Question

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

我需要的是在前 4 个 < li> 项之后带有 < br> 标记的列表。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" },
  ];

灰烬代码：

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 个字母）空迭代（尽管有 <br>）。

但是，如果我使用#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 更改了车把助手中的一些内容以启用绑定，这就是为什么您的 html 具有该变形标记的原因。要使用没有余烬的普通车把助手，您可以将模板类型更改为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>";
});

您可以在该小提琴http://jsfiddle.net/marciojunior/vzsUN/中看到这一点

如果您的 url 不需要通过绑定更新，您可以使用unbound视图助手：

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

否则，您可以使用bindAttr视图助手：

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

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

Answer 2

尝试这个

<a {{bind-attr href="url"}}>{{title}}</a>