Отображение родительского шаблона в дочернем шаблоне

Question

Я работаю над созданием главного приложения cordova/javascript, где пользователь, представленный со списком продуктов, затем в зависимости от того, что они выбирают, попал на страницу с подробной информацией о вкладках продукт. Каждая вкладка будет генерироваться в зависимости от того, какой продукт они выбирают. Наряду с загружаемой специфической информацией о продукте, я все же хочу сохранить список всех продуктов в представлении, чтобы пользователь мог переключать продукты, когда захочет. Вот изображение, чтобы лучше понять, о чем я говорю. .

Я попытался использовать ember.js, чтобы запустить его, но столкнулся с несколькими проблемами. Я могу получить начальный список продуктов, сгенерированных и перейти к конкретным деталям продукта, но как только я попытаюсь загрузить главный список продуктов во втором шаблоне, все ломается. Я знаю о включении двух шаблонов с {{outlet}} в родительском шаблоне, но я не могу получить это, чтобы ребенок наследовал родителя. Можно ли это сделать в ember или я должен начать смотреть на другие структуры, такие как Anuglar? Любая помощь приветствуется.

Answer 1

Отображение вложенных шаблонов на самом деле там, где Ember имеет преимущество перед другими фреймворками, на мой взгляд.

Это должно быть очень просто с использованием вложенных ресурсов. В маршрутизаторе, вы можете сделать что-то вроде

App.Router.map(function() { 
    this.resource('products', function() { 
    this.route('product', { path: '/product_id' }); 
    }); 
}); 

Очевидно, что вы будете получать ваши данные в каждом соответствующем маршруте. Что-то вроде

App.ProductsRoute = Ember.Route.extend({ 
    model: function() { 
    this.store.find('product'); 
    } 
}); 

App.ProductsProductRoute = Ember.Route.extend({ 
    model: function(params) { 
    this.store.find('product', params.product_id); 
    } 
}); 

В вашем product шаблоне вам необходимо включить {{outlet}} для всех дочерних маршрутов, чтобы представить в (то есть, products.product).

Например

product.handlebars

{{#each}} 
    {{name}} 
{{/each}} 

{{outlet}} 

продукты/product.handlebars

Product: {{id}} 

Заканчивать раздел ресурсов in the guides.

---

EDIT

Если вы хотите, чтобы основной список, чтобы отобразить по-разному между products шаблоном и products.product шаблоном, удалить основной список из products шаблона и поместить его в products.indexи в products.product шаблон.

Затем укажите, что и ProductsIndexController, и ProductsProductControllerneeds его родительская модель. Это даст оба шаблонам доступ к продуктам через controllers.products.

App.ProductsIndexController = Ember.ObjectController.extend({ 
    needs: 'products', 
    products: Ember.computed.alias('controllers.products') 
}); 

App.ProductsProductController = Ember.ObjectController.extend({ 
    needs: 'products', 
    products: Ember.computed.alias('controllers.products') 
}); 

См this jsbin и associated guides.