Updating model hasMany relationships in UI - ember.js

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

Related

Qt Quick, SQLITE - how to bind multiple views to one model / (multiple models with one db)

I'm struggling with following scenario:
I have one QML with a ListView containing all the students in SQL db
I also have another QML file which contains a Page with details of any selected student.
When user clicks on one of the entries in the list he's being moved (using StackView) to the second QML with all the details.
On the details page the user is able to modify the data and save it. The problem is that after doing that, the list is not being refreshed (e.g. when user adds a new student there is no new entry on the list).
The reason behind this is that when I open the DetailsPage, I'm delibarately creating a new model with access to the same table in SQL. When I then submit the changes, the new model gets updated but not the old one (the one connected with the list). So when I come back to the list it still holds the old data.
Now I'm looking for a way to fix it, I have some ideas but I'm not sure which of them is the best solution (maybe none):
one thing I tried was to reuse the very same model across multiple views. It didn't really work since in the DetailsPage I need to see only these rows that match the selected student. So I would need to filter it, but how? By setting a model property (I've seen that in one of the tutorials)? How would I reset it later back to the initial state?
Another idea is to create a different model for the DetailsPage and after submiting changes (possibly while popping the page from the StackView), notify the previous model about the changes and force it to emit the dataChanged signal. But again - I don't really know how to do it.
At the moment the model in StudentList is declared like that:
SqlDb {
id: sqlModel
onDataChanged: {
console.log("TROLO")
}
}
So there nothing inside it really. When opening the DetailsPage, I need to specify the name to filter the results so it looks like that:
Layout.fillHeight: true
SqlDb {
id: sql_model
name: studentName
onDataChanged: {
console.log("TRALA")
}
}
When submiting changes I got "TRALA" printed but not "TROLO".
I was mostly using this official Qt tutorial
https://doc.qt.io/qt-5/qtquickcontrols2-chattutorial-example.html

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.

Sitecore Custom Multilist

In Sitecore, I built two custom multi-lists, where the second one depends on the first. The only issue is, that after selecting the first one, I have to save the item before the second multi-list filters the items.
My question somebody know how to create a two custom multi-list on Sitecore, where the second one filters automatically after selecting an item in the first (without save event), or which event can I override to do it?
It sounds like what you are looking for is some kind of front end event that you can use in the Sitecore backend to update a list based on another list selection without a save event. I don't think there is really anything out of the box for that..
Really what you should be doing (to do the 'sitecore' thing) would be to have your first selection (be it multi-list or whatever you like) simply point to a datasource item for another template item which is where your user can set the second option(s). I think you would benefit from taking a different approach like this rather than trying to customise Sitecore here.

managing a composite object in Ember - ObjectController, ArrayController,?

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?

Backbone, selectively render parts in template

I am listing products as table rows, each row contains input fields for specifying the quantity of products.
I made a Fiddle for it here, http://jsfiddle.net/kroofy/4jTa8/19/
As you can see, after the input in the Qty field have been made, the whole row render again. And because of that the focus of the input field will be lost, which is not good if you want to input more than just one digit, or tab between input fields.
What would be the most elegant way to solve this?
I would handle this by setting model.set({qty: _qty}, {silent: true}) and then updating the non-input fields with this.$.
As an alternative to the silent treatment: rather than listening for change events, listen for change:qty and change:sellPrice and have a method that updates just the HTML that needs updating within this.$, rather than re-rendering the DOM object and breaking your focus.
Either way, your comment about "selective updating" on the fiddle is certainly the right way to go.
(this.$ is a backbone hack to jQuery that restricts all selectors to search only within the DOM of the View's element. The element doesn't even need an ID or class; it just needs to exist and the View maintains a handle to it. It's incredibly useful.)
i built a plugin for backbone called Backbone.ModelBinding that may be able to help in this situation. my plugin allows you to update portions of a view with data from a model, when the model changes.
i've forked / updated your fiddle to show it in action: http://jsfiddle.net/derickbailey/FEcyF/6/
i removed the binding to the model change. i've also added id attributes to the inputs of the form to facilitate the plugin (the attribute that the plugin uses is configurable, though). and lastly, i've added a data-bind attribute to the sell price total td.
you can get the plugin here: http://github.com/derickbailey/backbone.modelbinding/
hope that helps
FWIW: my plugin is an automated version of what Elf is suggesting. I've written code exactly like he is describing, numerous times, which is where the plugin came from. I just got tired of writing that code by hand :)