managing a composite object in Ember - ObjectController, ArrayController,? - ember.js

I am a bit unsure about how to implement this in Ember and preserve things like two way data binding. I'm a bit unsure whether Ember could support the object model we currently have. I have a menu, that is made up of menu_headers and items. It could look like this:
menu
menu_header
menu_header
items
items
items
menu_header
items
items
I have structure so that menu, menu_header, and item are three separate objects (as can be seen here: ember and iterating through a json array of objects ). I have created a menu route but I'm not sure how to really structure this further. For example, will this synthesize an ObjectController, an ArrayController, multiple ObjectController's? It seems like the examples of ArrayController are a bunch of one items and not a composite like this?

Related

List of News Articles In Sitecore (Best Approach?)

I am creating a Sitecore MVC site for a client and I need to create page that will list news articles for the company.
So far, I have created items that use a shared data template called “Article,” and I also have a sublayout (a view rendering) called “Article” that will display these items.
For the list itself, my plan was to create another component (a sublayout) call “News_List”, and to put a placeholder in it called “List”.
My question is this: can I allow the author to insert articles (e.g., N items of type “Article”) into this placeholder via the page editor?
Will SC allow you to insert multiple instances of the same component into a placeholder? Will this break anything?
I believe this is a pretty common question but I have not found a definitive answer. Thanks in advance…!
You can insert as many components (of the same type) in your placeholder as you want.. Just make sure to put the placeholder settings correctly and give it a decent name (not just "list" ;))
But are you sure you want to do this? Your editors will manually need to create a list of components for each article they want to add on the page. Doesn't sound to be very user (editor) friendly.. Maybe you should consider creating a list component that can get a list of articles as a datasource and show those. Or even select them automatically (but that might be not according to your business case)..
Yes, authors can add multiple instances of the same component into a single placeholder.
Assuming that the code of the component doesn't do any stupid things it's absolutely ok to do this.

How do I structure an Ember.js app so I can access application state from itemControllers?

I have a collection of models, each of which stores a bit of application-persistent state on the controller. I want to access this state elsewhere in the app, but I'm not sure exactly how.
Here's a JS Bin with a stripped-down version of the app which demonstrates what I'm trying to do: On the "Boxes" route, I want to display a count of the number of clicked widgets, but from BoxController I don't know how to get access to the WidgetControllers that have that property.
If I understand the guides correctly, I should be able to use needs to inject one controller into another, but this doesn't really apply when I'm using itemController to wrap each model in its own controller instance.
I would break it up into 3 parts...
1) Add a computed property to the App.WidgetsController the contains the checked widgets. Something like
clickedWidgets: Ember.computed.filterBy('#this', 'hasBeenClicked', true)
2) Add needs: ['widgets'] to the App.BoxController
3) Change the clickedWidgets computed property of the App.BoxController to get the list of clickedWidgets from the App.WidgetsController and the filter that list by widgets which match the box.
clickedWidgets: function() {
return this.get('controllers.widgets.clickedWidgets')
.filterBy('box', this.get('model')).length;
}.property('controllers.widgets.clickedWidgets.[]')
You can see a working bin here: http://jsbin.com/yizafe/1/edit
This should work for you, yes needs:['widgets'] is way to go: http://jsbin.com/tunuj/1/edit?html,js,output

Ember.js - where to place server communication logic

I'm having a problem figuring out what is the idiomatic Ember.js way of representing the following task: the application should display a list of master entries (let's call them classes) each one having one or more child entries (let's call them students), the latter having in turn teacher-marks, as sub-child entries.
I want the page to display the list of classes along with the list of students for each one as the standard view, while the teacher-marks should be initially hidden, but made visible on demand, when they should be editable in place (new and remove operations).
The way I've implemented this display-wise is this:
Each class is displayed as an Ember view, as I need a lot of interaction with the controller. The teacher-marks are implemented as Ember components, as well as the students. Neither the view, nor the components perform any communication with the server, they basically just send actions to the controller / route.
Displaying and hiding the teacher-marks are done via properties in the components.
I only have one route for all this (and as far as Ember.js tutorials and examples go, I feel I may be doing it wrong) and one controller. The route is named 'classes' and has an ArrayController displaying the array of classes. I have item controllers for each class.
The route object is the one that fetches data from the server. The manipulated child elements (e.g. new/removed teacher-marks) are pushed to the server via dedicated model functions (using Ajax calls) called from the main route events. I am not using Ember data.
As far as I read, I should be having nested resources for this implementation, but am otherwise at a loss as to how to implement it that way and keep displaying the classes and students at all times.
I would greatly appreciate all amendments and suggestions to the way I currently implemented this. It would also help me a great deal if you could add why will something work better one way or the other.
I haven't included any code as I feel it would be better expressed this way as a problem. My code is obviously more complicated than above, and not involving the class - students case. If needed, I can sketch-up a model.

Updating model hasMany relationships in UI

I've trying to modify the contents of a hasMany relationship view some UI elements. I have two basic models, container and item. Containers have multiple items and they can have varying numbers of items. For instance:
App.Container.FIXTURES = [
{id:1,name:'Container 1',slots:[0,0]},
{id:2,name:'Container 2',slots:[0,0,0,0]},
{id:3,name:'Container 3',slots:[0,0,0]}
];
I'm using the id 0 as sort of an empty item. It shows that this container can have an item here, but it's currently empty. There are numerous different items that can go into each position.
In my app, I have a custom UI that I've created that allows a user to select a new item to fill each slot. The problem is that for some reason, it's not updating in the container model. No matter what I try, it's just updating in the view, but not on the actual model instance. I thought this would work because the properties would be automatically bound.
I've created a JSBin here displaying the problem. If you click the save button, a json object of the current state of the model will be printed to the console.
What can I do to update the actual model properties? Please keep in mind that the position matters. For instance, if I change the item in the middle position of three, only it should update; not pushed onto the end.
Thanks. Any ideas would be appreciated.
This is a modelling issue.
You have Container, each of which has many Item... except that what's actually happening is you're using the Item class as your options - this is your catalogue, if you will, and you want to put these items into "slots" which you haven't created a model for.
So, depending on what you want to do, you should probably model it like this (using better names - I chose mine for clarity of explanation):
Container hasMany Slots each of which is connected to its Item
So: Container hasMany -> Slots <- belongsTo Item
That is, you have a non-reified "join", which you're sort of calling "slots" and attaching to Container at the moment.
I say depending on what you want to do because I'm not sure if you want to have the simple case I outlined above, which is "here are a bunch of possible items you can choose to put any number of copies of into your containers" or if you want the more complicated to develop case which is "here is a bunch of items which are finite... as you add each item to a container, it disappears from the list of possibilities". To do the latter is much more complicated, but of course it's possible... this is how inventory systems work.
I hope that's answered your question...
To put it another way, you need to build yourself a Slot model, related to each of your other models, and manage the join properly. If you bind the slots properly to each dropdown then Ember will take care of hooking up the data for you.
Let me know if you need further help on how to do this.
I've modified your JSBin to comprehensively show you what I mean. Hope that helps explain it:
http://emberjs.jsbin.com/tenoqimu/5/edit

Emberjs Handlebars #each helper slow when bound to computed properties

I'm running into a performance issue when I render a list of items using the #each helper or a collection view bound to some computed properties of an Ember.ArrayController. Performance is fine with a small list of 10 - 20 items, but around 50 - 100 it starts to lag quite noticeably. Try checking off a few todos or clicking "Add Todo"
Example code is here: http://jsfiddle.net/Jonesy/ed3ZS/4/
I noticed that the childViews in the DOM get re-rendered with each change, which could very well be the intended behaviour at the moment, but I'd prefer to be able to just have a todo be removed from the DOM of unfinished todos list individually and appended to the bottom of the finished todos list, which would in theory be much less costly.
What I'm hoping to have answered is whether am I looking at a performance issue with Ember collection views, or is displaying a list populated from a computed property a bad idea, and if so, will I need to manually manage the todo model's location in the view layer as it changes from unfinished to finished and vice versa.
This is a side-effect of how {{#each}} (and CollectionView, which is what powers it) works.
Internally, CollectionView uses something called array observers. An array observer allows you to subscribe to mutations made to an array when they are done using Ember.Array's mutation methods (replace, pushObject, popObject, etc.) The API for array observers is described here.
What this means is that, if you push a new object into a collection view, it will insert render one new element in the DOM and leave the rest in place.
In the example you posted, however, the array is not being mutated--you're creating a brand new Array object every time a new item is added or removed. When the binding synchronizes, it replaces the old array with the new array. To {{#each}}, this is no different than removing all of the elements and then adding them back in.
The solution to the problem is to use a single array, instead of a computed property that returns a different array object each time it changes. You can see the Contacts app for an example of how to do this.
Obviously this is a very common pattern, and we'd like to add some kind of filtering that does the right thing by default to Ember.ArrayController down the road.