For the optimisation and quick rendering I need to be able to compile html in javascript side of the component.
In ember 1.x we could do something like this https://api.emberjs.com/ember/1.0/classes/Ember.Handlebars, But in Ember 3.x I cant see compile function when I use
Ember.Handlebars.compile()
What is the best way of doing that? Thanks
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).
What's the most correct way to use Ember list view with ember-cli?
The docs still show the {{#collection}} helper, and even though that works, that helper has been deprecated.
I tried using {{#view 'list-view'}}, and it didn't throw any errors, but it also didn't work. I believe it didn't render the itemView.
I didn't tackle whether it should use collection or view, but I did find a way to load list-view into an ember-cli project (when ember-cli is at version 0.0.40 or less).
I submitted the solution as an Ember-CLI pull request. Since it's a version-specific solution, I won't be surprised if they don't merge it, but it might be a "magnet" for even better solutions.
Look in my proposed README under Installation.
I'm trying to render the templates in ember.js on HTML. Can the templates in ember.js be rendered using underscore.js?
Technically it may be possible but you should use handlebars for the templates. In Ember the integration of handlebars is deep into the view layer. The also have the data binding system built on top it (metamorph.js).
The ember team is also working on HTMLBars which should speed up rendering and simplify the data binding system. The current word right now is that, upgrading handlebars template to HTMLBars will be very simple maybe even without any modification.
This post should give you some more useful information on using other templating engines.
I am wondering what is the best way to realize a multi language support for a web app with handlebars and EmberJs in the back. There is no native multi language support in handlebars.
I found a handlebars helper https://gist.github.com/tracend/3261055 The code looks good and pretty simple, but I didn't test it yet.
Do you know another plugins/helpers?
I use this one which is specific for Ember:
https://github.com/jamesarosen/ember-i18n
It adds a 't' handlebars helper :
{{t main.offers countBinding="offers.length"}}
It supports plurals (via CDLR.js) and is not limited to handlebars thanks to Em.I18n.TranslateableProperties mixin, which allows property translation via a convention on any Ember Object.
It is very easy to write a helper, so you will find none or many handlebars implementations.
I'm using https://github.com/jquery/globalize for my projects. The implementation is a peace of cake.
Globalize is maintained by JQuery, supports everything you need and has an active community.
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.