I have an Ember JS confusion. First of all I have to admit I'm a bit of an Ember newbie so apologies if this is obvious.
I have the following template:
<script type="text/x-handlebars" data-template-name="threadListItem">
{{#linkTo show thread.receiverLogin}}
<h4>{{thread.receiver.login}}</h4>
<span>{{view.prettyTime}}</span>
{{/linkTo}}
</script>
There's basically a linkTo helper with some elements inside of it.
The weird thing is the {{view.prettyTime}} doesn't display anything when it's inside the linkTo.
However, if I move the span outside the linkTo it finds the view variable ok and it works.
Is there anyway to get access to the view object inside the linkTo?
Christopher is correct that you can access the prettyTime property with:
{{view.parentView.prettyTime}}
Since you're new to ember, it's maybe worth mentioning that in most cases it is best to avoid accessing properties of the view. Instead, consider adding a prettyTime property to your controller. The controller will be the default context for sub-views like the one created by the linkTo helper, so you'll be able to access it with just
{{prettyTime}}
linkTo creates its own view, so the view you want to get access to is the parentView of view.
{{view.parentView.prettyTime}}
I am trying to upgrade a partially built UI to the latest Ember.js rc1 and it has turned into a very big rewrite job thanks to the dramatically changed API. Most info out there (and here) has been rendered useless. I've had to go through the documentation again several times to get things partially working but there are a lot of loose ends. Here is a biggie. The views do not update like they did under the previous version. I'm missing something that must have to do with rerender, {{outlet}} or something else that I'm not aware of. The ember guides seem to need updates.
The template is very simple:
<script type="text/x-handlebars" data-template-name="index">
<button {{action "addOne"}}>add one</button>
<ul>
{{#each item in controller}}
<li>{{item.title}}</li>
{{/each}}
</ul>
</script>
When clicked, the button adds a new element to the backed array. The console logs show that the array is growing, but the template does not change. Here is a jsfiddle to illustrate how far I've gotten. Can anyone figure out what needs to be added?
I modified your example to highlight the fact when we use arrays in Ember, that we are using Ember arrays (Ember.A() or Em.A() if you want to make explicit this fact). From my understanding, you can use the methods Em.A().addObject and Em.A().removeObject to achieve the basic functionality using the Ember.Object getter and setter methods, (i.e. .get() & .set()) .
In order be properly observed by the Ember application, it is important to use the Ember getters and setters.
A modified version of your fiddle.
It's been difficult to keep up with the evolution of Ember JS as its approached (and reached!) version 1.0.0. Tutorials and documentation have come and gone, leading to a lot of confusion about best practices and the intent of the original developers.
My question is exactly that: What are the best practices for Ember JS? Are there any updated tutorials or working samples showing how Ember JS is intended to be used? Code samples would be great!
Thanks to everyone, especially the Ember JS devs!
Mike Grassotti's Minimum Viable Ember.js QuickStart Guide
This quickstart guide should get you from zero to slightly-more-than-zero in a couple of minutes. When done, you should feel somewhat confident that ember.js actually works and hopefully will be interested enough to learn more.
WARNING: Don't just try this guide then think ember-sucks cause "I could write that quickstart-guide better in jQuery or Fortran" or whatever. I am not trying to sell you on ember or anything, this guide is little more than a hello-world.
Step 0 - Check out jsFiddle
this jsFiddle has all the code from this answer
Step 1 - Include ember.js and other required libraries
Ember.js requires both jQuery and Handlebars. Be sure those libraries are loaded before ember.js:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
Step 2 - Describe your application's user interface using one or more handlebars templates
By default ember will replace body of your html page using content of one or more handlbars templates. Someday these templates will be in separate .hbs files assembled by sprockets or maybe grunt.js. For now we will keep everything in one file and use script tags.
First, let's add a single application template:
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
</div>
</script>
Step 3 - Initialize your ember application
Just add another script block with App = Ember.Application.create({}); to load ember.js and initialize your application.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
That's all you need to create a basic ember application, but it's not very interesting.
Step 4: Add a controller
Ember evaluates each handlebars templates in the context of a controller. So application template has a matching ApplicationController. Ember creates is automatically if you don't define one, but here let's customize it to add a message property.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Step 5: Define routes + more controllers and templates
Ember router makes it easy to combine templates/controllers into an application.
<script type='text/javascript'>
App.Router.map(function() {
this.route("index", { path: "/" });
this.route("list", { path: "/list" });
});
App.IndexController = Ember.Controller.extend({
message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
});
App.ListRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
}
});
</script>
To make this work, we modify our the application template by adding an {{outlet}} helper. Ember router will render appropriate template into the outlet depending on user's route. We will also use the {{linkTo}} helper to add navigation links.
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
<div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
{{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="list">
<h3 class="demo-panel-title">This is the list template</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3 class="demo-panel-title">This is the index template</h3>
<p>{{message}}</p>
</script>
Done!
A working example of this application is available here.
You can use this jsFiddle as a starting point for your own ember apps
Next Steps...
Read the Ember Guides
Maybe buy the Peepcode screencast
Ask questions here on Stack Overflow or in ember IRC
For reference, my original answer:
My question is for any Ember.js expert, and certainly the respective tutorial authors: When should I use design patterns from one tutorial, and when from the other?
These two tutorials represent best practices at the time they were written. For sure there is something that can be learned from each, both are sadly doomed to become out of date because ember.js is moving very quickly. Of the two, Trek's is far more current.
What components of each are personal preferences, and what components will prove essential as my app matures?
If you are developing a new ember application I would not recommend following the Code Lab approach. It is just too out-of-date to be useful.
In Code Lab's design, Ember seems to be closer to existing within the application (even though it is 100% of his custom JS), whereas Trek's application seems to live more within Ember.
Your comment is bang-on. CodeLab is making taking advantage of core ember components and accessing them from global scope. When it was written (9 months ago) this was pretty common but today best-practice for writing ember applications is much closer to what Trek was doing.
That said, even Trek's tutorial is becoming out-of-date. Components that were required ApplicationView and ApplicationController are now generated by the framework itself.
By far the most current resource is the set of guides published at http://emberjs.com/guides/
- they have been written from the ground up over the last few weeks and reflect the latest (pre-release) version of ember.
I'd also check out trek's wip project here: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
EDIT:
#sly7_7 : I'd also give an other example, using ember-data https://github.com/dgeb/ember_data_example
There is an important project that both new and veteran Ember.js developers should take advantage of:
Ember-CLI
While it does require some comfort level with the command line, you can generate a modern Ember project with community recommended best practices in a matter of seconds.
While it is beneficial to setup an Ember.js project the hard way as in Mike Grassotti's answer, you should not be doing that for production code. Especially when we have such a powerful and easy to use project like Ember-CLI to show us the Yehuda approved happy path.
There is 30 minutes fresh screencast made by #tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY
I would highly recommend using Yeoman and its accompanying ember generator. Out of the box you get all the tools you need to develop, test and prepare an app for production. As an added bonus, you'll be able to split your view templates into multiple files and start with an intelligent directory structure that will facilitate you in creating a maintainable codebase.
I've written a tutorial on getting it up and running in about 5 minutes. Just install node.js and follow along here
The Fire Up Ember - Peepcode screencast is worth a watch.
Also go through this free tutorial titled Let’s Learn Ember from Tuts+ Premium. Its free because its from their free courses series.
This course, as the Tuts guys call it, is divided into fourteen easy to follow chapters.
I hope this helps.
Regards,
I prefer the charcoal yeoman approach. It gives you a ton of stuff out of the box including:
a nice folder architecture using a 'module' approach.
neuter
live reload
minify
uglify
jshint
and more.
and its super easy to setup, just run yo charcoal to create an app then yo charcoal:module myModule to add a new module.
more info here: https://github.com/thomasboyt/charcoal
I've just created a Starter Kit, if you would like to use the latest EmberJS with Ember-Data, with Emblem template engine. All wrapped in Middleman, so you can develop with CoffeeScript. Everything on my GitHub: http://goo.gl/a7kz6y
Although outdated Flame on Ember.js
is still a good tutorial for someone looking at ember for the first time.
I've started building a series of videos that start from before Ember and build towards using Ember in anger in serious use-cases for real-world things.
If you're interested in seeing this hit the light of day (I'm more than happy to eventually put it public if there's interest) you should definitely go over to the post I made and hit "like" (or just comment here, I guess):
http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284
I'm super keen to make it to help the community flourish, but also to help people learn how to build standard web sites in an easy way.
I am currently in a situation where i need to remove the metamorph tags used in a ember js select box. I use a JS plugin that takes my select box and turns it into a styled select box which i have customized using css.
I currently have this ember js select box in my view.
<script type="text/x-handlebars" data-template-name="opportunities">
{{view Ember.Select
contentBinding="controller.filter"
optionLabelPath="content.metacode"
optionValuePath="content.description"
class="mydds opportunitylistcategory"}}
</script>
I just need a way to remove the metamorph code but for ember selectbox to still have binding etc enabled... I have read about removing metamorphic data with a jquery sortable but that hasnt helped me. Thanks in advance!
The best way to work around this is to use an Ember.CollectionView.
I've run into this issue with a simple unordered list (<ul><li>).
Here is an answer that demonstrates how to do it https://stackoverflow.com/a/11749736/701368
Edit
The original answer was for a version of Ember before 1.0.
I would recommend using the {{each}} helper with the itemViewClass attribute when dealing with newer versions of Ember.js. You can find the documentation here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_specifying-a-view-class-for-items.
So don't use the block level helper; you want to use {{each}} instead of {{#each}}.
I'm trying to create a simple Ember.js app to learn more about JavaScript MVC frameworks. However, it appears applying CSS styles to a view template isn't possible (or rather, I am ignorant of the proper way to do this):
Without template
<span class="myClass">
Some value
</span>
In this case, the style appears properly, as expected.
With template
<span class="myClass">
<script type="text/x-handlebars>
{{MyApp.someVariable}}
</script>
</span>
In this case, the style doesn't seem to be applied at all.
I even tried something like:
<script type="text/x-handlebars>
{{MyApp.someVariable classToAdd="myClass"}}
</script>
Which creates an even more bizarre output (I can't even find that element in the Chrome developer element tab).
Online tutorials don't mention this issue and I have tried researching other Stackoverflow issues (there are some about applying styles but not exactly like in this situation). Can anyone enlighten me as to what I am not doing properly?
I normally use ClassNames and classNameBindings property of Ember Views. That get the job done most of the time.
You can also try Ember layout property to wrap the template.
Found answer to this question in jquery's append() documentation
You need to convert text into html using jQuery:
template = Handlebars.compile(..);
html = template(json);
$('body').append($(html)); // <- don't forget to wrap it