Emberjs, {{#link-to}} Handlebars ломаются при обертывании вокруг элементов DOM

Мне нужно создать {{linkTo}}, который охватывает всю строку таблицы, но это не позволяет мне использовать {{linkTo}}, если между {{#linkTo}} и {{/ссылка на}}

Когда я помещаю linkTo непосредственно вокруг {{Name}} , как в приведенном ниже коде, он работает

{{#each}}
  <tr class="people-list">
    <td>
      <input type="checkbox" class="toggle">           
      <label class="category-text">
        {{#linkTo 'category' this}}
          {{Name}}
        {{/linkTo}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
      {{/linkTo}
    </td>
  </tr>
{{/each}}

но когда я пытаюсь расширить эти ссылки за пределы , как показано ниже, linkTo вообще не работает.

{{#each}}
{{#linkTo 'category' this}}
  <tr class="people-list">
    <td>
      <input type="checkbox" class="toggle">            
      <label class="category-text">       
          {{Name}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
    </td>
  </tr>
{{/linkTo}
{{/each}}

html handlebars.js nest ember.js link-to
person Ian S    schedule 17.02.2014    source источник
comment
Оборачивать элементы tr в якорную ссылку было бы недопустимым HTML.   -  person steveax    schedule 18.02.2014

Ответы (3)


arrow_upward
4
arrow_downward

Вместо использования {{#linkTo}} вы можете получить этот результат, вызвав действие, которое перенаправляет на другой маршрут:

{{#each}}
  <tr class="people-list" {{action 'goTo' this}}>
    <td>
      <input type="checkbox" class="toggle">            
      <label class="category-text">       
          {{Name}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
    </td>
  </tr>
{{/each}}

И затем на вашем контроллере:

actions: {
    goTo : function(input){
        this.transitionToRoute('category', input);
    }
}
person Jake Haller-Roby    schedule 17.02.2014
comment
я на самом деле предпочитаю этот путь - person fanta; 18.02.2014
comment
Вот что следует отметить по этому поводу: вы не получите класс active, который вы бы получили, если бы использовали link-to, если ссылка все еще отображается на экране, когда вы вводите маршрут с одной категорией. - person Jason; 22.02.2014
comment
@Jason Как бы класс active не стал проблемой? У меня есть динамический шаблон, который я {{render 'globalList' model}} внутри шаблона всех других моделей (например, category.hbs, user.hbs и т. д.), но когда я использую действие goTo в этом конкретном случае, я получаю сообщение об ошибке - person Ian S; 23.07.2014

arrow_upward
1
arrow_downward

почему бы вам не использовать представление с tagName='tr', а в событии клика перенаправить на нужный вам маршрут? что-то вроде этого:

App.LinkToCategory = Ember.View.extend({
  classNames: ['people-list'],
  tagName: 'tr',
  click: function() {
    router.transitionTo('category', category)
  }
})

и в вашем шаблоне что-то вроде этого:

{{#view App.LinkToCategory category=this}}
  <td>
    <input type="checkbox" class="toggle">            
    <label class="category-text">       
      {{Name}}
    </label>
    <img class="table-img" src="images/x.png">
    <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
  </td>
{{/view}}

Я не проверял, работает ли это, но вы поняли идею.

person fanta    schedule 17.02.2014

arrow_upward
0
arrow_downward

Помощник link-to принимает свойство tagName, так что вы можете сделать элемент, который связывает сам tr.

{{#each}}
  {{#linkTo "category" this tagName="tr" class="people-list" role="link"}}
    <td>
      <input type="checkbox" class="toggle">            
      <label class="category-text">       
          {{Name}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action "edit" bubbles=false}} src="images/pencil-grey.png">
    </td>
  {{/linkTo}
{{/each}}

Вам также может понадобиться добавить bubbles=false к кнопке редактирования, чтобы нажатие на нее не переходило по ссылке. И поскольку «ссылка» не является элементом a, я также добавил атрибут role="link", чтобы он был доступен для программ чтения с экрана.

person Jason    schedule 21.02.2014