Question

我是ember.js和ember-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>

Answer 1

您应该创建一个Ember组件，而不是创建一个Handlebars帮助器。使用Ember组件，您可以使用{{#linkTo}}并且所有绑定都可以使用。

使用Ember组件创建虚拟属性rows，您可以在其中设置项目每排;然后，您可以在组件模板内部使用常规{{#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/中的教程应该会有所帮助。

在ember助手中绑定链接

1 个答案: