I've been having a good deal of trouble recently trying to get sub templates to render in Ember. The jsbin below doesn't work because I'm trying to use the REST adapter and just can't figure it out how to get mockjax and ember working together -- anyway, I think the REST adapter critical to the problem, as I will explain.
So I have a contact item. I can see ember calling my /api/contacts route to grab the model for all the contacts for listing. After this, I'm trying to create a link to an individual contact and have that render within the same template. In other words, I would still see the list of contacts, but I also see information on the individual contact that I just clicked on. That individual contact contains many contactPoints. Basically, what's happening is that I never see ember looking for the contactPoints. I see the "contact" template render, but it never has any contactPoints.
If this unclear, I can clarify. But the link below should help. Thanks!
http://emberjs.jsbin.com/xacuyalu/6/edit
I've simplified a bit your JsBin to highlight the solution
http://emberjs.jsbin.com/xacuyalu/7
With what you are trying to achieve, there's no need to name outlets.
The main problem in your code is the way you use variables inside loops and templates.
In your contacts template, you write
{{#each contact}}
But then forget to use contact as a variable when passing values
The same way, in your contact template, you use contactItem that doesn't exist. You can simply use the attribute of your model here.
The problem with mockajax was the url you were mocking /api/contacts instead of /contacts. This works in my modified JsBin.
Also please note that your payload won't work with contactPoints
EDIT: I've updated the JsBin to display the contact points.
http://emberjs.jsbin.com/xacuyalu/9
First thing, I would recommend you to read this https://github.com/emberjs/data/blob/master/TRANSITION.md. It will show you how to prepare your data to work nicely with Ember Data.
I have extracted your payload to be more readable. Here are the things that I've done:
Sideload contact points
Change the name of the attribute in the json from contactPointsIds
to contactPoints
add the address attribute on the ContactPoint model
Rename the attribute on the Contact model from contactPoint to
contactPoints
Related
Quick question for anyone that can help relating to adding an item to a models collection. (eg: Adding a tag to a blog post. Many to Many relationship) Doing this through a REST API call with default blueprints.
This works: http://host/blogpost/1/tag/add/2
however I would expect this to work: http://host/blogpost/1/tag/2
Instead it gives a 404 not found.
Thanks
Spencer
OK, thanks to #japel in the sails chat room for pointing out that there is no route for the second option. In fact now that I think about it, how else would the blueprint know if I want to add or remove an item without specifying the keyword, although perhaps changing from a POST to a DELETE could work. The comments in the docs for the blueprint API add method are somewhat misleading: http://sailsjs.org/documentation/reference/blueprint-api/add-to
For now I can live with specifying the action in the route.
I can't to get a good idea of how you support permalinks. This is perhaps simply because emberjs doesn't support permalinks.
I'm building a UI that allows users to choose certain reports, so in ember this is easy enough you just add a route 'reports' that takes in an id so the URL looks like this:
#/reports/10/
What I need to have is some extra parameters to also be present in that URL for example start and end dates and metric types e.g.
#/reports/10/metric/impressions/start/10-08-2013/end/11-08-2013
So those parameters need to be picked up if I paste them in the browser, AND importantly when the user changes those settings e.g. via a date picker the URL should update to reflect the new parameters.
Edit:
Here is a link to a jsbin with a solution based on the answer below. http://jsbin.com/ucanam/703
Just throwing my 2 cents into this topic. Please note that i am using this approach in production and it works fine. Actually there are 2 parts to this question.
1. How can i have multiple dynamic segments?
One approach is described by Mike Grasotti using nested resources. This approach works but i think this approach is a little bit cumbersome in this case.
Why do i think it is cumbersome?
Routes are a means to separate concerns in Ember. In this case i do not see separate concerns. It looks to me like you are trying to mirror the state of a form in your URL. I think it should be one route that is responsible for the concern "state of the form". Therefore i recommend to have a look at the following post, in which i describe how to implement multiple dynamic parameters per Route: Is resource nesting the only way to enable multiple dynamic segments?
2. How is it possible to trigger the serialize hook to update the URL, when you have changed just one parameter in your form?
The problem is that the serialize hook is only triggered, when the Route gets entered with a new model. I guess you have some logic in place, that deals with the event of changing the parameters start or end. I suppose that you do not re enter the Route in this case. So how do you trigger the serialize hook in this case again to update the URL? I am handling a event like this in my router and there i am using the following code:
var currentRouteName = this.controllerFor("application").get("currentPath");//the ApplicationController stores the name of the current Route
var url = App.Router.router.generate(currentRouteName);
App.Router.router.updateURL(url);
PS: You can have a look at my production app here. This app shows the best movies in cinemas in Germany. Even if you do not know german, you can click on one of the controls in the top area and see the URL getting updated. I guess this is pretty much the same you want?
I have wondered how to do this as well. The data has to go in the URI since we want to share links, but you don't want to confuse the application location with the application state.
The hash: #/reports/10 would be the minimal information required to tell the application where to go. All the other data which is independent of location should probably go in the search portion of the URI. I would suggest something like this:
#/reports?metrics=impressions&start=10-08-2013&end=11-08-2013
In theory you could parse the query string when you enter a route and then update your model accordingly. From my understanding the route's model() function is called when navigating to a route by changing the URL directly or clicking a link so that would be the place.
Unfortunately, in practice this didn't work as I expected. I'm not sure if it's just JSBin, but there is some weird behavior where the link with the extra application data doesn't actually navigate which is the whole point for a permalink. Notice that if you follow the directions in the JSBin the start and end dates are taken from the url instead of the default values. This concept could be extended to send extra requests for different model data using findQuery etc so almost any thing is possible.
http://jsbin.com/abadet/7
Anyways, it might give you some ideas.
There are a couple of ways to get this done in ember. If you need a lot of flexibility for misc parameters that might be passed to a report, check out ember-query which adds query-string support to ember applications.
Another option is to use nested resources. So for example:
App = Ember.Application.create({});
App.Router.map(function() {
this.resource('report', {path: '/reports/:report'}, function() {
this.resource('metric', {path: '/:metric'}, function() {
this.resource('start', {path: '/:start'}, function() {
this.route('end', {path: '/:end'});
});
});
});
});
App.StartEndRoute = Ember.Route.extend({
model: function(params, transition){
return transition.params
}
});
<script type="text/x-handlebars" data-template-name="start/end">
<pre>
Report ID: {{report}}
metric: {{metric}}
start: {{start}}
end: {{end}}
{{log this}}
</pre>
</script>
See this jsbin for working example
I am attempting to place multiple controllers within my template partials with AngularJS- The problem I am encountering is that of the first layer, direct-linking to these sub-controllers and their related snippets.
An example would be a management page for user accounts, say I am on a user-list and wanted to change a user from the list's password, I click on their change-password button, and want to redirect the user to #/ManageUsers/ChangePassword/?UserID=<uid here> rather than #/ManageUsers_ChangePassword/ or similar, but the Angular documentation (Or lack thereof) on the subject suggests that this is impossible, or not 'The Angular Way'...
Being that my team wants to keep these separate controllers as partials, is there a non-hacky way to do this with Angular?
There has been recently published a blog post about one possible way of solving deep linking with AngularJS. It has a parent/child style of implementation where parent sections do not need to be updated if you need to change only contents of the child, which makes it pretty neat.
It's here: http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
why not direct to #/ManageUsers/ChangePassword/:UserID ? You can get the UserID from $routeParams. See an example on the $route page.
You can even create routes like #/ManageUsers/:OrganizationID/:SectorId/:UserID/ChangePassword/Confirmation that will be used by the url #/ManageUsers/10/2/32/ChangePassword/Confirmation
i'm trying to use the new MVC concept and therefore started witht the AccountManager Example (examples/simple). Everything works fine as far as I stick to the tutorial, but I tried to extend it a bit.
I define a border layout in 'Viewport.js' and assign a header component (views/Header.js) to 'north'
and a tab-Panel (views/MainPanel.js) which contains the 'views/user/List.js' as a tab.
Until now everything is ok.
But now i added another store (Profiles.js) and model (Profile.js),
changed the references in code to use profile-store instead of user-store.
I also updated the column-definition, imports ('requires') and everything es that is relevant(at least i think so...).
When i run my app i get a js-error in Observable.js -> addManagedListener-> 'item is undefined' when he tries to invoce the on-method of 'item'.
At first i tried hard to find the mistake i made in the code but I could not find anything,
so i started to play around a little bit and found out,
that it works as soon as I rename the folder 'user' in views/ to 'profile' (of course i had to fix some references in code too).
Is this behavior a bug or is it volitional?
If so can anybody please tell me how this is exactly working?
Thank you very much!
ExtJS looks for the Javascript files based on your model/view/controller declarations.
i.e. if in your tell your controller that you have a store called Profile (via the stores attribute) by default, it is going to look for a file at app_name/stores/Profile.js
The problem was that i had to give my controller a reference to the store and the model.
I didn't do that from the beginning, after my controller had a reference to the view, the view had a reference to the store and the store had a reference to the model.
So I assumed everything is ok.
But it seems to be mandatory to provide this information redundant as far as understand and i can live with that...
Can anyone please explain to me what is template_bundle_id for in Facebook JS.. Example below template_bundle_id is hardcoded:
FB.Connect.showFeedDialog(
53126803199, null, target,
null, null, FB.RequireConnect.promptConnect
);
What is the use of template_bundle_id if I can hardcode the template_bundle_id?
Is unique template_bundle_id need to assign to each facebook js method that I call subsequently or I can use the same template_bundle_id number?
If I remember correctly, you cannot publish a feed story without having a template for it. The template defines the general content of the feed, and provides placeholders for variables.
Each template is uniquely identified with a template_bundle_id. It is called a bundle id because you define a template for short stories, full stories, etc.
Whenever you want to publish a feed story, you provide facebook with the template_bundle_id and the contents of the variables that are to be filled.
You can register template bundles either by code (if you have dynamic requirements for the templates, using Feed.registerTemplateBundle), or using the console here.
You could just use one template, but all your feed stories would look the same.