I am creating an Ember application as an add-on to some HTML returned from the server. I need this HTML so that the site can be indexed by search engines, and also to speed up the initial page rendering for the users.
So my application consists of several Ember Views, appended to different DOM elements of the HTML generated by the server. I don't use master templates for routes, so I set renderTemplate function of each route to do nothing.
My Ember App is bound to body element and I can successfully append a custom view to an element down the tree. It works:
In this JSFiddle three last elements of the list are appended by Ember
But when I try to use linkTo helper in my template, I hit an error:
Uncaught TypeError: Cannot read property 'container' of null ember-latest.js:32224
which is in this function:
router: Ember.computed(function() {
return get(this, 'controller').container.lookup('router:main');
}),
In this JS fiddle I just add linkTo to the template, and it breaks everything
In general, can Ember work this way - having many Views scattered
over the HTML rendered by the server?
How can the example code be
fixed?
I've fixed your fiddle here, Check it out.
Seems like you are starter to Ember,
So here are some tips for you,
You should have an application template, which will be the root template and on which all the templates will be rendered.
You shouldn't access views using this.container.lookup, that is for debugging only.
You shouldn't append views to the DOM, it's the job of the framework to do.
By default your application will be appended to the body of the html, if you want it to be appended elsewhere, give the rootElement property when creating the application. Refer here for configuring your application.
The rootElement can be either a DOM element or a jQuery-compatible selector string. Note that views appended to the DOM outside the root element will not receive events. If you specify a custom root element, make sure you only append views inside it!
Don't access any controllers globally like App.itemsController.set("content", model), if you want to access another controller inside a route, use this.controllerFor, and to access inside another controller, use needs.
You need not create any controller instance like App.itemsController=Ember.ArrayController.extend({}).create();
The framework will take care of all these.
I found that I need to additionally bind the view and the container together to make this fiddle work
App.itemsView.set("controller", App.itemsController);
App.itemsController.set("container", this.container);
So the resulting working code snippet is here:
http://jsfiddle.net/ddegtyarev/6cBRx/6/
Again, let me reiterate that I'm building an hybrid Ember application - i.e. I have some HTML returned right from the server, and some appended by multiple Ember views in multiple places. This is why I have to manually create the views and bind them with controllers etc.
Related
I have a situation where the back button actually causes harm in my application and I seem to remember a solution in ember where I could have a single link-to helper not update the url (but keeping the routes /link-to helpers for other routes working as usual).
Is this still an option/possible in ember 1.11? If so - how? If no - what other options do I have if I need to prevent a single link-to from allowing the user to go back?
{{#link-to "foo.bar" bar}}details{{/link-to}}
Unfortunately the link-to helper doesn't pass the replace property down to the view itself, the LinkView does have a property replace which will replace the current route in history instead of just adding it to the history.
Option 1
Use an action instead of a link-to, and use this.replaceRoute/this.replaceWith instead of this.transition....
Option 2
Extend the LinkView and set replace: true, dupe the link-to helper code and call it link-to-replace and use your extended LinkView.
I'm looking at creating a google maps component. But I would like it to be self contained so it will have its own model, controllers and views. So for example the component will fetch its own data from the server and I'll also be able to refresh the data when needed. Ideally I'd simply add the component to the current template that is showing, so for example: {{map-view}} and then everything the component needs to do will take care of its self.
The component will also need to listen to triggered events from other controllers as a user will be able to search for a specific location and the map will need to change its position.
Is this possible to do in EmberJS? As I haven't found anything like this, specially when having its own model. I know there is a component in EmberJS but it seems very limited. Am I wrong in thinking this?
the controller cannot have its own model all values must be passed to component. Please refer to ember docs and this Discussion
You can make a google map component and pass the location and marker data to the component. this data will get updated due to ember data binding.
so you can have something like this
{{map-view location=userEnteredValue}}
you can search for ember component talk by Kris Selden on youtube which includes a google map component good for you to start with.
updated
https://gist.github.com/krisselden/8189650
I have a fairly complex text that I need to generate programmatically for display within an ember template. So far I have put this text construction into a controller.
Unfortunately, the text also needs to contain hyperlinks to other pages within the same ember app. When I just insert a href links into the text, ember does not recognize those links and triggers a full page reload upon following the link.
Is there a way to invoke ember's linkTo helper from within a controller?
I could also try to put this into a template, but the logic is fairly complex and emblem is somewhat limiting in this regard.
You can use an action in the template and inside the action you can do this.transitionToRoute
http://emberjs.jsbin.com/uMeQAvuk/1/edit
BTW, the only reason it should be causing a full page refresh is if something is different in the base url (before the hash) than the current page, or if it is doing some sort of page refresh instead of just an anchor tag.
Learning EmberJS in a trial by fire and one issue that comes up is from my generated linkTo's in the application header. I have a paginator on a resource such that the url becomes #/page/N. My linkTo is not capable of picking up on N from the application template, however (because i'm not in a PageController context), so the link will always be #/ even if a page is set.
What is the best way to solve this? I'm using http://hawkins.io/2013/07/pagination-with-ember/ as a base for my paginator.
If I understood correctly, you want to access the PageController and it's pagination helpers from a different controller. You can do this using needs to get access to the PageController.
needs: 'page',
pageBinding: 'controllers.page'
Now you can access the PageController within your controller using this.get('page'), and use any other methods on. In the template you can also bind to page.foo properties.
Is there any way in Ember to update the Handlebars template content and re-render the dependent views dynamically?
I tried by using Ember.TEMPLATES and Ember.Handlebars.compile method, but it didn't worked and the JSFiddle is available here, so any suggestions?
I don't know why you're attempting to do this, but if it's just for testing sake, here is a working fiddle http://jsfiddle.net/VTP4n/2/.
Ember caches the template inside the view as a computed property, so I'm overriding it and calling rerender on the view. I wouldn't even consider using this in production though.
Up until recently, it was as easy as overriding the template and then calling view.notifyPropertyChange('template'), but with the new container stuff, it's a lot more complex to do it cleanly.
Capture anything you want the user to manipulate in the template as a property of the view/controller and create a binding for it either as computed property or attach an observer to it. This way you can create a view dynamically and append it anywhere you want in your document.