Создать древовидный вид в emberjs

Question

Я пытаюсь создать приложение emberjs, и у меня возникли проблемы с наилучшим подходом к созданию ui, который я бы хотел. Я хочу иметь приложение с компонентом выбора детализации, а когда на определенном уровне разрешить пользователю выбирать элемент и добавлять его в свою корзину/корзину. Идея высокого уровня состоит в том, что itemGroups находятся на верхнем уровне, а затем элементы в каждой группе элементов (на данный момент достаточно двух уровней).

У меня есть следующий jsfiddle, который дает простой пример. В этом примере у меня есть мои группы, а затем ниже моего ковша. То, что я хотел бы сделать, - это когда я нажимаю на групповое обновление этой части представления, чтобы отображать элементы в этой группе.

Как только у меня есть, что в конечном итоге я бы хотел, чтобы пользователь мог выбрать эти элементы и добавить их в их ведро. По сути, пользователь может перемещаться по иерархии групп/элементов, чтобы выбрать элементы для добавления в их ведро.

Я уверен, что я слишком усложняю это, но не знаю, как это сделать.

HTML

<script type="text/x-handlebars" data-template-name="application"> 
    <h1> ember - latest jsfiddle </h1> 
    {{itemGroup}} 
    <br> 
    <br> 
    {{outlet}} 
</script> 
<script type="text/x-handlebars" data-template-name="index"> 
    <h2> Bucket Items: </h2> 
    <div>{{model}}</div> 
</script> 
<script type="text/x-handlebars" data-template-name="itemGroup"> 
    <h2> Groups </h2> 
    {{#each ig in controllers.itemGroup }} 
    <div class="buttonlink">{{ig}}</div > 
    {{/each}} 
</script> 

JS

App = Ember.Application.create({}); 
App.ApplicationController = Ember.ObjectController.extend({ 
    needs: "itemGroup", 
    itemGroup: Ember.computed.alias("controllers.itemGroup") 
}); 
App.ItemGroupController = Ember.ArrayController.extend(); 
App.ItemGroupView = Ember.View.extend({ 
    templateName: 'itemGroup', 
    click:function(){ 
    alert('i should replace the item group view with item details'); 
    return false; 
} 
}); 
Ember.Handlebars.helper('itemGroup', App.ItemGroupView); 

App.IndexRoute = Ember.Route.extend({ 
model: function() { 
    return "my bucket" 
}, 
setupController: function (controller, model) { 
    this._super(controller, model); 
    this.controllerFor('itemGroup').set('model', ['group a', 'group b', 'group c',  'group d']); 
} 
}); 

Update

См this fiddle я есть обновить свой оригинальный пример, основанный на некоторых вещах, найденных через чопперы комментарии. Я хочу просто обновить раздел групп с элементами в группе и оставить раздел ведра, мои маршруты будут основаны на ведре для загрузки текущего состояния ведра, а затем позволяют пользователю просверлить группы/элементы , последнее обновление показывает больше, о чем я думаю.

Я могу заставить его работать, я не уверен, является ли это «ember» способом такого взаимодействия или если есть более идиоматический способ.

Answer 1

Лучший способ сделать это зависит от вашего варианта использования. Один из способов - загрузить элементы в свой шаблон, но скрыть их, а затем переключить их видимость с помощью jQuery.

Шаблоны:

<script type="text/x-handlebars" data-template-name="itemGroups"> 
    <h2> Groups </h2> 
    {{#each ig in controllers.itemGroup }} 
     {{itemGroup}} 
    {{/each}} 
</script> 

<script type="text/x-handlebars" data-template-name="itemGroup"> 
    <div class="buttonlink"> 
     <div class="group">{{ig.name}}</div> 
     <div class="details hidden">{{ig.items}}</div>   
    </div > 
</script> 

Вид:

App.ItemGroupView = Ember.View.extend({ 
    templateName: 'itemGroup', 
    click:function(){ 
     this.$('.details, .group').toggleClass('hidden'); 
     return false; 
    } 
}); 

CSS:

.hidden { 
    display: none; 
} 

Посмотрите this jsFiddle.

Answer 2

Примечание: Извините за длинный ответ, но я подумал, что было бы полезно разработать, так как это довольно распространенный случай использования, и это должно быть полезно для любого нового для Ember (и Ember Data).

На мой взгляд, следующий будет лучший способ реализовать свой сценарий в Ember и Ember данных:

Настройка шаблонов для application (все остальное будет оказана в этом пути-х {{outlet}}), groups (это шаблон будет охватывать все, что нужно делать с группами), groups/index (для отображения списка всех групп) и group (для отображения одной группы).

<script type="text/x-handlebars" data-template-name="application"> 
    <h1> ember - latest jsfiddle </h1> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="groups"> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="groups/index"> 
    <h2> Groups </h2> 
    {{#each group in content }} 
    <div class="buttonlink"> 
     {{#link-to "group" group}}{{group.name}}{{/link-to}}</div> 
    </div > 
    {{/each}} 
</script> 

<script type="text/x-handlebars" data-template-name="group"> 
    <h2>{{name}} Items</h2> 
    {{#each item in items}} 
    <div class="buttonlink"> 
     {{item.name}}</div> 
    </div > 
    {{/each}} 
    <br /> 
    {{#link-to "groups.index"}}Back to groups{{/link-to}} 
</script> 

В вашем JS вы затем создали свой магазин. Для тестирования я использовал DS.FixturesAdapter, который позволяет мне указывать данные непосредственно в моем JS для целей тестирования. В конце концов вы захотите заменить это чем-то вроде DS.RESTAdapter, чтобы поговорить с вашим бэкэндом.

App = Ember.Application.create({}); 

App.Store = DS.Store.extend({ 
    revision: 13, 
    adapter: DS.FixtureAdapter 
}); 

Затем указать наши модели с помощью Ember данных:

App.Group = DS.Model.extend({ 
    name: DS.attr('string'), 
    items: DS.hasMany('item', { async: true }), 
}); 

App.Item = DS.Model.extend({ 
    name: DS.attr('string'), 
    group: DS.belongsTo('group'), 
}); 

Я опустил данные светильники для краткости, но вы можете увидеть его в следующей jsFiddle. { async: true } сообщает Ember Data, что родительские (App.Group) и дочерние (App.Item) модели асинхронно загружаются (т. Е. Не обязательно в одно и то же время).

В качестве следующего шага мы определяем, какие маршруты мы имеем в нашем приложении. Для этого примера мы заботимся только о группах - особенно глядя на все группы и на отдельные.

App.Router.map(function() { 
    this.resource('groups', function() { 
     this.resource('group', { path: '/group/:group_id' }); 
    }); 
}); 

Теперь все, что осталось сделать, это сказать Ember, что делать, когда каждый маршрут вводится:

App.IndexRoute = Ember.Route.extend({ 
    redirect: function() { 
     this.transitionTo('groups.index'); 
    } 
}); 

App.Index маршрут является маршрутом по умолчанию приложения (думаю о нем, как «домашний» маршрут). В нашем случае мы хотим перейти непосредственно к списку групп, поэтому перенаправляем на groups.index.

App.GroupsIndexRoute = Ember.Route.extend({ 
    model: function() { 
     return this.get('store').findAll('group'); 
    } 
}); 

Это задает модель маршрута для всех групп, которые у нас есть в нашем магазине. Ember автоматически обнаружит, что это массив, и создайте соответствующий Ember.ArrayController, который мы можем использовать в этом маршруте, но мы также можем переопределить его, если хотим добавить дополнительные функции.

Обратите внимание, что нам не нужно явно устанавливать App.GroupRoute или App.GroupIndexRoute, так как Ember достаточно умен, чтобы сделать это для нас в фоновом режиме (однако, опять же, мы могли бы переопределить его, если нам нужно).

См. this jsFiddle.