I have two different models in my application
App.Foo = DS.Model.extend({
title: DS.attr('string')
});
App.Bar = DS.Model.extend({
title: DS.attr('string')
});
Both foo and bar models get their data from different models in my backend.
They both have some common fields, like title. But others are also different (and I will need different views for them).
However, when displaying a list of them, I would like to be able to merge them and order them as if they were the same object.
Unfortunately from what I see in the ember-data codebase, that doesn't seem to be possible.
Any idea on solutions ?
This has been solved in the latest versions of Ember Data with the implementation of findAll.
Therefore, we can do :
DS.store.findAll(DS.Model)
Which will load all records from all models.
Related
The project I am working on relies heavily on many-to-many relationships, however I am unable to see how exactly to achieve this using Ember Data in Ember JS.
The use case I currently have is made up three models:
Person
Address
PersonAddress
The link between the person is necessary for what I am currently working on. Would it be possible to get an example of how this could be achieved?
Apparently you are trying to manage the many-to-many relationship yourself using the intermediate PersonAddress model, which I assume holds a single person associated with a single address.
This is not a very good way to do things. To find a person's addresses, you're going to have to manually lookup all the entries in PersonAddress for that person, then take the addresses from those entries. The problem with this approach, among others, is that when a new address is added, for example, you will have to redo this lookup, and ensure that it happens automatically in order for the UI to be updated properly.
It is much better to simply have hasMany relationships on both Person and Address. Then Ember Data will keep everything in sync--something like
// models/person.js
export default DS.Model.extend({
name: DS.attr(),
addresses: DS.hasMany('address')
});
// models/address.js
export default DS.Model.extend({
address: DS.attr(),
persons: DS.hasMany('person')
});
I'm brand new to Ember and stuck on something that seems very basic. So far in my e-commerce application, I have two models, Product, and Style; a Product has many Styles. For each product, I want to list a subset of the styles (e.g., those that are in stock or out of stock). Coming from a Rails background, I thought I would create a model method in Product called stockedStyles, which filters its styles and returns only those with stocked=true. That didn't work, so I tried another approach of using a controller method, but struck out there too.
Here's the code so far: http://jsbin.com/mufumowabi/1/edit?html,js,console,output
While I would definitely like to know the best practices way of doing this, I'm also curious about other approaches people can suggest that would work but are not recommended -- and why they aren't recommended. Especially when I'm learning something new, I like knowing all the different ways you could do something and then choosing the best/cleanest one.
If there's a tutorial that covers this sort of thing, please send it my way. I couldn't find anything that does this sort of thing, even though it seems so basic.
Lastly, I've found debugging Ember to be somewhat of a black box. For example, for the non-working code posted here, the JS console just says "error". Tips on how I would get more information about why what I'm doing is wrong would be most appreciated as well.
TIA,
fana
I feel your pain. I too came from a rails background expecting similarities in the implementation only to get confused initially. Nobody is ever exaggerating when they claim Ember requires a very large learning investment, but trust me if you stick around it's totally worth it.
Real quick let's take care of a simple goof: You can assign an object property to be either Ember.computed, or function() { /***/ }.property('sdf'); You can't have both. So make that computed function either:
unstockedStyles: Ember.computed.filterBy('styles', 'stocked', false);
or
unstockedStyles: function() {
return this.get('styles').filterBy('stocked', false);
}.property('styles.#each.stocked')
but you can't do both at once.
Ember Models vs Rails Models
Next, the difference with Ember, coming from rails perspective, is that models in Ember.js are intended to be extremely light, serving only as a minimal binding between the data source and the framework overall. Rails takes quite literally the opposite approach, encouraging a very heavy model object (and this is still a large source of contention in the rails community).
In ember.js, the model method helpers are intended to be placed in the controller objects (again, counterintuitive coming from rails). Moving that out, you'll want your models to look like this:
App.Product = DS.Model.extend({
title: DS.attr(),
styles: DS.hasMany('style', { async: true })
});
App.Style = DS.Model.extend({
desc: DS.attr(),
stocked: DS.attr("boolean")
});
The reason for this difference from Rails is that the role of controllers in Ember.js is for "decoration" of your object, whereas in Rails its to handle incoming/outgoing data logic. For each page, you may want to render the same data in different ways. Thus, the model will remain the same, and the controller takes on the burden of encapsulating the extra fluff/computation. You can think of decoration in the same way you were taught the inheritance pattern in OO, with a slight twist:
Let's say you want to have a Person base class (your Ember model), but then you extend it to Teacher and Student subclasses (your controllers) in order to add an additional propertiy that may be from the same type but is not modeled in the same way. For example, Teachers and Students have a many-to-many relationship to courses, but you want to model Students as attending their courses, where Teachers are instructing them. The controller acts as a way to provide such a filter.
ArrayController vs ObjectController
As for the controllers, computed properties for individual records should be placed in the ArrayController's associated ObjectController (we'll call it ProductController), so your controllers now look like this:
App.IndexController = Ember.ArrayController.extend();
App.ProductController = Ember.ObjectController.extend({
unstockedStyles: Ember.computed.filterBy('styles', 'stocked', true)
});
Finally, while Ember.js can automatically associate ObjectControllers with their associated ArrayController for resources defined in your router, you're loading a Product array on the IndexController, so you need to tell IndexController to use ProductController for its item behavior:
App.IndexController = Ember.ArrayController.extend({
itemController: 'product'
});
App.ProductController = Ember.ObjectController.extend({
unstockedStyles: Ember.computed.filterBy('styles', 'stocked', true)
});
Handlebars Binding
Not much here except for a small mistake: while you've enabled a computed property correctly in the proper controller, your {{#each}} loop is instead bound to the original styles array. Change it to use the new property:
{{#each unstockedStyles}}
<li>
{{desc}}, in stock: {{stocked}}
</li>
{{/each}}
And now you're good to go!
JSBin of fixes here: http://jsbin.com/sawujorogi/2/edit?html,js,output
I am trying to add a "profile management" functionality to my Ember application, using ember-data. For that, my backend / frontend play together in the following way:
The backend returns a profile array with several "profile objects", with well-known IDs, for the logged-in user, in a fixed URL: /api/profile. Currently I have a me object (settings related to currently logged in user) and a my-company object (settings related to the company belonging to the current logged-in user). It is straightforward to add more objects. The objects are not of the same kind, and have different properties. There is only one object of each kind.
I can view and edit each of the objects using different router/controller/template. Most of the functionality is reusable. For the routers and controllers the only thing I need to adapt is the id of the object in the profile array, and the route to the edit controller.
By using this approach, I can easily add objects to the profile, and add templates to display and edit the properties of each object. The only thing I need to do is:
Define the model for the new object
Setup standard routers and controllers based on the already coded mixins
Create the templates
So this is very easy and flexible, which was my motivation to implement this, but I have one worry. Since I am putting together all properties in the Profile model:
App.User = Ember.Mixin.create({
email : DS.attr('string')
});
App.Company = Ember.Mixin.create({
vat : DS.attr('string')
});
// To do this, the profile model includes the User and Company mixins,
// as well as some common properties.
// TODO: Any other way to do this?
App.Profile = DS.Model.extend(App.User, App.Company, {
name : DS.attr('string'),
type : DS.attr('string')
});
I am worried that when writing back to the server (currently I have only tried with FIXTURES) the properties from the Company object will leak to the User object, and vice versa.
So, the question is: if a model has undefined properties (that is, the data coming from the server does not have those properties) will those properties be sent back to server with null value, when serializing the object, or will they not be set at all in the JSON? Mind you that the properties were not there to start with, but the model has "all possible properties, for all different profile objects".
Maybe there is another way of defining the Profile model, without including all properties of all different objects? I have not been able to do this: if a property is not declared in the model, it can not be used in the template/controller (which is the whole point of defining them in the model, I suppose).
I would also like to hear some generic feedback on the chosen approach. I feel I am bending Ember a bit too much by having all this "bunch of different objects" in a common URL, but I also have the impression that this can reduce the complexity of this part of my application.
A demo can be seen here.
First and foremost i have not worked with ember-data, but i am pretty sure that properties that are not defined are also sent to the server. I also think, that this is not a good approach on data modeling. I pretty sure you should rather have subclasses of your App.Profile. I would go for something like this:
App.Profile = DS.Model.extend({
name : DS.attr('string'),
type : DS.attr('string')
});
App.User = App.Profile.extend({
email : DS.attr('string'),
type : DS.attr('string', {defaultValue : 'user'})
});
App.Company = App.Profile.extend({
vat : DS.attr('string', {defaultValue : 'company'})
});
I guess you can could have one API-Point for all with this approach also, by just defining an API-Endpoint on the level of App.Profile.
We are using Ember together with Ember-Data and are stumped by following setup:
There is a parent object (Epic) which has a number of children (UserStory). We have modelled this accordingly using ember-data:
App.Epic = DS.Model.extend({
name: DS.attr("string"),
description: DS.attr("string"),
project: DS.belongsTo("App.Project")
});
App.UserStory = DS.Model.extend({
name: DS.attr("string"),
description: DS.attr("string"),
goal: DS.attr("string"),
benefit: DS.attr("string"),
epic: DS.belongsTo("App.Epic")
});
What we would like to achieve now, is that we a have a list of independent forms to edit the Epic inline with all of its UserStories. Obvisouly we would simply deliver all of the UserStories together with the Epic via the RESTAdapter. Yet we are afraid that this would lead to ugly update scenarios: changing one UserStory would trigger a update of the entire Epic with all of its UserStories. In our architecture a UserStory is an indepenent entity which should be maintained by a dedidacted REST service.
As an ember-newbie we would like to implement something in the lines of:
Load the Epic via ember-data
Extend the EpicController to load all UserStories into a separate model-(list).
Changes to the Epic via the dedicated form fire a change to the Epic Rest Service.
Magic: Changes to an individual UserStory form fire an isolated and individual change to the User Story Rest Service.
How can the magic be achieved?
Take a look at the controllerFor method:
http://emberjs.com/guides/routing/setting-up-a-controller/
this is kind of embarrassing, but what I wanted is exactly how ember-data behaves per default. All I needed to do, was to have the Epic REST-Service deliver the UserStory ids instead of the inline objects. Ember will get all children in one go - the URL setup is a bit ugly but works - and will use the UserStory rest-service to do the puts.
Ember has a steep but satisfying learning curve.
Thanks for your feedback.
Stefan
To explain my question, I have concocted a contrived example, so bear with me. I have two related ember-data models that each have the same type of embedded association:
App.Article = DS.Model.extend({
title: DS.attr("string"),
summary: DS.belongsTo(App.Summary, {embedded: true}),
});
App.Book = DS.Model.extend({
title: DS.attr("string"),
summary: DS.belongsTo(App.Summary, {embedded: true}),
});
App.Summary = DS.Model.extend({
text: DS.attr("string"),
});
One great feature of ember-data is that find() will return an object of the correct type which can be used to render the view even before the actual data values have been retrieved from the server. However, I worry this convenience doesn't extend completely to associations.
In cases like this, when multiple types of objects share the same type of associated data, I would like to reuse my view that displays Summary objects for both Book objects and Article objects. In particular, I would like to do the following:
book: Ember.Route.extend({
route: '/book',
connectOutlets: function(router) {
book = App.Book.find(1);
router.get('applicationController').connectOutlet('titleOutlet', 'book', book);
router.get('applicationController').connectOutlet('summaryOutlet', 'summary', book.get('summary'));
},
}),
That is, I would like to have one view for the book-specific stuff, and one view for the summary, which is independent of whether a Book or Article is displayed.
Unfortunately, I can't do book.get('summary') because this returns null if the book has not been populated by store.load(), which is called asynchronously by Book.find().
The alternative seems to be to pass around the book object itself, and always reference nested paths, starting from the root level of the object. In this particular case, the structure of Book and Article are identical, so there is no difference. But if I want to use an association and refer to it independently of its context, it seems there should be another way.
Thoughts?
I've put together a gist illustrating this full example.
Update
I'm resigned to Mike Aski's point that this is not possible. But in order to keep my logic abstract, I create a uniformly named binding pointing to the association, where ever it may be buried, each time I connectOutlet. It's when I call connectOutlet that I know what type of object I'm sending to the controller/view and thus the view can use the binding and doesn't need to know about the rest of the object.
You should try to pass directly the article or book instance as the summaryOutlet context, not the summary. Then, in the view, use:
{{view.content.summary.text}}
instead of what you certainly have for the moment:
{{view.content.text}}
In that way, the binding will be refreshed as soon as record data will be loaded.
I don't see any alternative: While relations are not populated in the instance, you will always get null if you try to traverse them in a synchronous, imperative maner...