StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCreate drill down view in emberjs
text
Body
copied!<p>I am trying to create an emberjs application and am having trouble coming up with the best approach to create the ui i would like. I want to have an application with a drill down selection component, and when at a certain level, allow the user to select an item and add it to their bucket/cart. The high level idea is having itemGroups at the top level, and then items in each item group(2 levels will suffice for now).</p> <p>I have the following <a href="http://jsfiddle.net/kFkBB/2/" rel="nofollow">jsfiddle</a> that gives a simple example. In this example i have my groups, and then below that my bucket. What i would like to do is when i click on a group update that portion of the view to show the items in that group. </p> <p>Once i have that ultimately i would like to allow the user to select those items and add to their bucket. Essentially the user can traverse the group/item hierarchy to select items to add to their bucket. </p> <p>I am sure i am over complicating this but am not sure exactly how to proceed with this.</p> <p>HTML</p> <pre><code><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> </code></pre> <p>JS</p> <pre><code>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']); } }); </code></pre> <p><strong>Update</strong></p> <p>See <a href="http://jsfiddle.net/EsXPm/2/" rel="nofollow">this fiddle</a> i have update my original example based on some of the things found through choppers comments. I want to just update the groups section with the items in the group, and leave the bucket section, my routes will be based on the bucket to load the current state of the bucket, and then allow the user to drill through the groups/items, the latest update shows more what i am thinking. </p> <p>I can get it to work, i'm not sure if this is the 'ember' way of doing this type of interaction or if there is a more idiomatic way. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload