Связывание ссылок в Ember Helper

Я новичок в 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>

javascript handlebars.js ember.js ember-cli
person Jont    schedule 13.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вероятно, вам следует создать компонент 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/ должно помочь.

person Paulo Schreiner    schedule 13.08.2014
comment
Ах, хорошо, тогда я еще раз посмотрю, хотя у меня сложилось впечатление, что вы не можете использовать JS внутри компонента, поэтому я не смогу выполнить цикл? - person Jont; 13.08.2014
comment
Вы можете зациклить с {{#each}} - person Paulo Schreiner; 13.08.2014
comment
Вот откуда впервые возникла моя проблема. Мне нужно сделать собственный цикл для создания вывода, который я только что добавил к исходному вопросу. - person Jont; 13.08.2014