1. 首页
  2. 问题列表
  3. 在余烬助手中绑定链接
提问者：小点点

在余烬助手中绑定链接


我是ember. js和enpe-cli的新手，在我尝试创建我的第一个自定义助手之前，一切都很顺利。

我正在尝试遍历模型，在页面内的多行上显示一些图像缩略图。

一切似乎工作正常，但我想尝试绑定链接。

这是我的定制助手：

import Ember from "ember";

export default Ember.Handlebars.makeBoundHelper(function(value, options) {

  var out = '';
  var b = 0;

  for (var i=0; i<value.length; i++) {
    b++;

    if(b === 1){
      out += '<div class="row">';
    }

    out += '<div class="col-md-4 col-sm-6 col-xs-12 center" style="text-align:center;">\
    <div class="row center">\
    <div class="col-md-12 center">\
    <a href="photo/'+value[i]._data.id+'">\
    <img class="center" src="'+value[i]._data.thumb_url+'" />\
    </a>\
    </div>\
    </div>\
    <div class="row center">\
      <div class="col-md-6">'+value[i]._data.status+'</div>\
      <div class="col-md-6"></div>\
    </div>\
    </div>';

    if(b === 3){
      out += '</div><div class="row"><div class="col-md-12">&nbsp;</div></div>';
      b=0;
    }

  }

  return new Handlebars.SafeString(out);

});

我知道你不能在助手中直接使用链接，所以我一直在玩不同的选项，运气不好。

我最成功的尝试是手动运行link to，使用以下内容：

Ember.Handlebars.helpers.linkTo.call('photo/1', 'photo.index', options);

但这对我也没有用。

-有什么建议吗？-恐怕我的方法完全错了

编辑

我试图通过助手实现的输出示例

<div class="row">
  <div>
    <a link><img></a>
  </div>
  <div>
    <a link><img></a>
  </div>
  <div>
    <a link><img></a>
  </div>
</div>

<div class="row">
  <div>
    <a link><img></a>
  </div>
  <div>
    <a link><img></a>
  </div>
  <div>
    <a link><img></a>
  </div>
</div>

共1个答案

匿名用户

您可能应该创建一个Ember组件，而不是创建一个车把助手。使用Ember组件，您可以使用{{#linkTo}}并且所有绑定都可以工作。

使用Ember组件创建一个虚拟属性row，您可以在其中设置每一行的项目；然后您可以在组件模板中使用常规{{#each}}遍历行和项目。

组件代码如下所示：

 App.SampleComponentComponent = Ember.Component.extend({ 
     rows : function() {
        var myRows = [];
        var elements = this.get('model');
        var b = -1;
        for(var i = 0; i<elements.length; i++) {
           if(i % 2 === 0) {
              b++;
              myRows[b] = [];
           }
        myRows[b][i%2] = elements[i];
     }
  return myRows;
  }.property('model'),
});

组件模板如下所示：

 <ul>
{{#each row in rows}}
  <li>
  <ol>
  {{#each item in row}}
    <li>{{item}}</li>
  {{/each}}
  </ol>
  </li>
{{/each}}
</ul>

您必须将项目数组传递给model参数中的组件。

工作示例：http://emberjs.jsbin.com/cowin/3/

http://emberjs.com/guides/components/的教程应该会有帮助。

相关问题