Почему возникает ошибка при переходе из вложенного маршрута на другой элемент этого маршрута?

Question

[ocatoll]

Есть роут /property/show.js

import Ember from 'ember';
const {inject} = Ember;
export default Ember.Route.extend({
  model(params) {
    let store = this.get('store');
    let p = store.findRecord('property', params.property_id, {reload: true});
    return p;
  },
  actions: {
    reloadModel: function () {
      this.refresh();
    },
    back: function (type) {
      this.transitionTo('property/' + type);
    },
  }
});

Есть соответствующий шаблон, в котором выводится информация об объекте и есть список похожих объектов, на которые можно перейти, условно вот так
{{#link-to 'property.show' similar.id}}
{{similar.id}}
{{/link-to}}

Проблема в том, что когда я захожу в карточку объекта по прямой ссылке, то все нормально - загружается правильная модель и все такое. Но когда я из карточки пробую перейти в другую карточку, кликнув по ссылке сгенерированной через link-to, то меняется только адрес в строке браузера, а в консоли хрома я получаю

VM1596 vendor.js:58445 Uncaught TypeError: Cannot read property 'insertBefore' of null
at Object.insertBefore (VM1596 vendor.js:58445)
at MorphList$insertBeforeMorph [as insertBeforeMorph] (VM1596 vendor.js:58362)
at Object.yieldItem (VM1596 vendor.js:55659)
at VM1596 vendor.js:20579
at Class.forEach (VM1596 vendor.js:45489)
at forEach (VM1596 vendor.js:20587)
at Child.eachHelper [as helper] (VM1596 vendor.js:20576)
at Child.compute (VM1596 vendor.js:25455)
at Child.value (VM1596 vendor.js:26080)
at Object.invokeHelper (VM1596 vendor.js:21604)

Уважаемые знатоки, подскажите пожалуйста, в чем может быть мой проблема ))

Answer 1

[ocatoll]

Нашел причину. В моем случае проблема в ember-cli-slick, который ломает js. Почему и что делать пока не понятно.

Comments

[ocatoll]

Решение проблемы:

I found a workaround putting the component inside a conditional block. I set loading in false before the server call and true after data parsing.

{{#if loading}}
// show loading message
{{else}}
// здесь вывод компонета, в моем случае ember-cli-slick
{{/if}}
This force the menu component to re render.

Answer 2

[Станислав Романов]

similar.id точно все ок?

Проверь переменную в шаблоне:

{{log similar.id}}
{{#link-to 'property.show' similar.id}} 
{{similar.id}}
{{/link-to}}

Покажи эту часть из router и этот route целиком

Comments

[ocatoll]

Да, тут все норм.
Сейчас локализовал проблему. Проблема в том, что ember-cli-slick при обновлении модели ломает верстку, вместо него пробую использовать ember-cli-owl-carousel2 Проблема примерно такая же. В итоге вопрос теперь такой: как заново инициализировать сторонний компонент, в данном случае ember-cli-owl-carousel2 при переходе в между роутами вида /property/show/1, /property/show/2 и т.д. Сейчас при таком переходе остаются старые элементы (похожие объекты) и к ним добавляются новые, но на них скрипт уже не срабатывает, т.е. остается старая карусель, которая крутится и работает, а перед ней добавляются новые нерабочие объекты. Надеюсь, что понятно смог ситуацию объяснить.

[ocatoll]

Все, решил проблему окончательно.

I found a workaround putting the component inside a conditional block. I set loading in false before the server call and true after data parsing.

{{#if loading}}
// show loading message
{{else}}
// здесь вывод компонета, в моем случае ember-cli-slick
{{/if}}
This force the menu component to re render.