I have multiple Ember apps that live in a Middleman app. The current directory structure is
[app-name]
components
helpers
source
assets
img
css
js
// jQuery for other pages
app.js
// An ember app
fullscreen
components
controllers
models
routes
views
app.js
// Another ember app
sandbox
components
controllers
models
routes
views
app.js
demos
// These currently contain the templates, in script tags
fullscreen.erb
sandbox.erb
I'm trying to figure out how I can move the templates out of the script tags. At this point, I've spent quite a bit of time trying to get various solutions to work:
https://github.com/mrship/middleman-ember
https://gist.github.com/GutenYe/4364010
http://nerdyworm.com/blog/2013/05/06/ember-dot-js-and-middleman/
This last one I had working at some point, but can't get it working again now.
What's the simplest way to accomplish this? I am new to Sprockets and Rack, which is making this harder for me to sort through.
Generelly its not hard to build this by yourself. U just need a JS runtime, compile the templates, and put them into Ember.TEMPLATES.
Have a look on precompilation: and the TEMPLATES Hash
Related
I start to study Ember.js
and I know some of conventions like 'application.hbs', 'index.hbs' but I don't know what kinds, how many conventions exist..
And, As I searched google, I got name of conventions. I think there are too many conventions in Ember. where do I search in google?? I already read https://guides.emberjs.com/v2.8.0/getting-started/quick-start/ from tutorial to glossary. but... still don't know what it is..
If someone know any summary or any sites about the convention, please help me. Thanks.
Routes and Pages
Ember applications are organized by pages (called routes). Each page in your application will have it's own route, and a route.js as well as page_name.hbs template assosciated with it. Any HTML written in the template will be rendered only on that page.
Your application will also have an individual application.hbs. Anything placed in here will be rendered on every single page, so you don't have to copy code for something like a navigation bar.
All of the various pages are mapped to URLs in your application router (router.js). Below is an example of a route map:
Router.map(function() {
this.route('home', { path: '/' });
this.route('page1', { path: '/pathToPage1' });
this.route('page2', { path: '/pathToPage2' });
});
Optional Pod Styles
Not entirely sure what you mean by convention, but at the highest possible level there are 2 widely used ways to organize an ember app.
By default, ember groups your application files based on type, with
all of the styles in a styles/ folder, templates in a templates/
folder, component templates in components/templates/ etc.
The alternative method is to use pod-styles, where your
application is organized by component (grouping templates (.hbs),
styles (.css), and routes (.js) ). Refer to this awesome tutorial
for help with that: http://www.programwitherik.com/ember-pods/
Handlebars Templating
Ember uses the Handlebars templating library to power the UI, and is used to declare components, helpers, etc. Handlebars works perfectly with HTML, however, and the 2 languages can be used in the same file without conflict.
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).
My question is: Can someone direct me in moving from controller based application to component base application?
I am building a map application for my dog training club. We are specialized in helping finding missing people.
In order to organize our training, we need an application to draw trails and add items on them etc.
I've started an app using Ember-Cli and OpenLayers-3. The application is working nicely, but I would like to move the code from controller based to component base approach.
I would like also to use more routing as at the moment, I have only one route and all user interactions are handled using actions.
I've setup a repository on github for those who would be kind enough to help me:
https://github.com/mylen/mantrailling
if you want to checkout the code and test the app localy, you'll need to modify the referer using a header mod in your navigator to use http://demo.melard.fr
You can see a beta of the website at that page :
http://recherche.utilitaire.melard.fr/beta/map
Thank you in advance,
First, we should clarify the intended uses of components, controllers and routes in ember.js.
Components are similar to Views, but they are isolated and therefore used to create reusable pieces of code, that handle the visual representation of your models.
Controllers are mainly used to decorate your models, but also to hold application state.
Routes represent you current application state. They are responsible for loading your models and to initialize your controllers.
To solve your first problem (controllers -> components), you only need to move all view related stuff, and only this, into components. Your code that decorate your model, for example the active flag of a way-point, remains in the controller. You only need to bind the data of your models/controllers to the components, via embers data binding. (http://guides.emberjs.com/v1.11.0/components/passing-properties-to-a-component)
Your second problem (use routes) is a bit harder to solve, I think. First you need to find all of the states your app currently have. After that, you should move your model loading and saving stuff into this routes.
Edit
Some references describing the problem.
https://github.com/ef4/rfcs/blob/routeable-components/active/0000-routeable-components.md
https://www.youtube.com/watch?v=QgycDZjOnIg
Edit 2
Your question is highly related to How to move ember from 1.x to 2.0, because the changes you mentioned will come along with ember 2.0.
Here are some additional links that describe how to prepare best for this upgrade.
https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice
http://discuss.emberjs.com/t/what-is-a-good-way-to-do-this-in-ember-2-0-no-itemcontroller-no-arraycontroller/6649
You can find a lot of resources if you search for ember 2.0.
Edit 3
Here is I think the most informative source for keeping up with new Ember releases:
https://www.youtube.com/watch?v=wsydQzQF4Ww
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 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.