i have a simple text field helper, taken directly from the ember contact example. it works properly in this jsfiddle, using ember-0.9.8.1 : http://jsfiddle.net/inconduit/dKsh3/2/
however when i try to run the same code using the latest ember built from master (v0.9.8.1-421-g189ad79), the content of the text fields never get set (they remain as empty) and double clicking them has no effect. why is this happening?
It's a context issue. You have to prefix the properties in the templates with "view".
See this modified JSfiddle:
http://jsfiddle.net/dKsh3/4/
Related
I want to know the low-level implementation of ember framework. When the handlebar templates defined inside script tag with type="text/x-handlebars-template" getting appended to the DOM? Also, how browser excludes that script?(i.e How actual flow of rendering a page is modified. I am new to ember and handlebars and just curious to know this.
I just run a couple of experiments with an older version of Ember for understanding more, what is really happening under the hood. (It is totally relevant to the latest Ember versions also.) You can read my findings in the Readme here: https://github.com/zoltan-nz/ember-resolver-experiment
Answering for your question, Ember will run the following function during the initialization process: https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/system/bootstrap.js#L40
As you see, there is a bootstrap function, which uses jQuery to find those special templates scripts in your DOM. It will compile with the ember-template-compiler and it will be added to the Ember.TEMPLATES object. (You can check in your console if you type Ember.TEMPLATES.)
As you see in this bootstrap function, these template script tags will be removed (line 72) from the DOM after compilation.
Each version of Ember package comes with different ember.js files (for production, and for debugging) and you can find there ember-template-compiler.js, which is basically the handlebar compiler. You don't need handlebar.js at all in ember project, because this ember-template-compiler.js is your handlebar.js.
If you would like to learn more about Ember.js, I wrote a free tutorial which start from the very basics: Ember.js tutorial
For the last question first :
A script is never seen in a browser so there is no need to exclude it from beeing rendered. WebComponent templates are now a replacement for such script template but if you are using some older template they will still be displayed so a script tag is a better solution for now if you want a template to be compatible with all browsers. So the rendering of the page is not affected. At the end of the page load you'll run your handlebar script that will calculate the template rendering and once it's done will insert it in the dom (typically replace a placeholder).
For your first question :
The question is unclear do you want to know how the template is appended to the dom or when it is appended or how it is rendered ? The best way to know that is to look at the source of handlebars.js. I don't know for ember.js but if you're just using handlebar you'll have to add the result of your processing manually in the dom (by using jquery for instance).
I have a weird issue using Ember 1.11 (built with ember-cli) and D3 Pie chart.
The chart is not displayed properly on ember routes, only on the index route (index.hbs).
The generated HTML code is the same on routes templates and index.hbs. I've used the same view/component on index.hbs as on routes.
Weirdly enough, I can fix this issue if by going to Inspect Element and removing the entire <head></head> tag. (Removing the content line by line does not fix it!)
I've installed a sample Ember application here. On the index you will see the chart. On the menu routes, there is the same chart (rendered with same view as it was rendered on index.hbs), but not displayed properly (it works a bit when you hover over that area).
The HTML code generated by the chart view is the same on all pages. If you copy the code from <div id="pieChart">..</div> and paste it in a empty static html page, the chart will be rendered correctly.
This issue can be reproduced using: Firefox/Chrome. In safari it seems to work.
Here is a paste2 which renders the chart.
The entire application code before build can be found here.
Edit: I've also reported this issue on github, here.
Set ENV.locationType to "hash" instead of the default ("auto"). Since you're working with an ember-cli application, this lives in config/environment.js.
The ultimate culprit for this can be found here: https://github.com/benkeen/d3pie/blob/master/d3pie-source/_segments.js#L44. Basically, d3pie is using a pattern fill for the circle arcs, which is exposed as a URL. When you're inside a route, that ends up having to go through Ember, which is configured by default to ignore hashed routes. By switching it, you effectively take that call out of Ember's routing namespace and it's able to resolve correctly.
Edit
See here for a working example: https://github.com/Little-Jon/so-29780096
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.
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.
I'm trying to test my ember code in my jsFiddle
I set framework to Ember 1.0.0-rc1 and onDomReady
and I added jQuery as a resource.
and I setup basic application template in html and declare application in js.
I think I set very basic of an ember app. but it doesn't work.
What am I missing here?
There is an up to date fiddle/jsbin link in the Ember Contributing document:
https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md
It is always up to date with the master version of ember.
Two things are going wrong here.
There is a bug in the way jsFiddle has implemented ember support. First off it should be including jQuery, and also it is loading ember before handlebars. You can see what's going on by right-clicking on the output frame and selecting view-source. As a workaround, manually add references to these libraries.
You've got a typo. Instead of type="type/handlebars" you should specify type="text/handlebars"
Working fiddle here
You should definitely use emberjs.jsbin.com. It has everything already setup.