I try to do simple application using Ember. Index controller:
App.IndexController = Ember.ObjectController.extend({
schools: [{name:"Old school"}],
actions:{
add: function(){
var schools = this.get("schools");
schools.push({name: 'New school'});
this.set("schools",schools);
}
}
});
Index template:
<script type="text/x-handlebars" data-template-name="index">
<button type="button" {{action "add"}}>Add school</button>
<ul>
{{#each school in schools}}
<li>{{school.name}}</li>
{{/each}}
</ul>
</script>
When i lunch application on start i see:
Old school
and when I hit add button nothing happens, why?
You need to use pushObject in order for ember to know that a value has been added to the list. And there is no need to set it afterward.
add: function(){
var schools = this.get("schools");
schools.pushObject({name: 'New school'});
}
Related
http://jsbin.com/qoyudape/1/edit
Despite using .pushObject() template doesn't update. I've noticed it DOES update, if instead this I use model or content in template;
What is this in view is referring to if not model ? Is it possible to get it working using this and not model or content ?
var App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function(){
return Ember.A();
}
});
App.ApplicationController = Ember.ArrayController.extend({
actions: {
update: function(){
this.get("model").pushObject( Ember.Object.create({a:"b"}) );
console.log( this.get("model") );
}
}
});
template:
<script type="text/x-handlebars">
<button {{action "update"}}>update</button>
<br><br>
{{#if this}}
array not empty
{{else}}
array empty
{{/if}}
</script>
this is referring to the controller. btw, an easy way to find that out is to do {{log this}} in your template see also: http://emberjs.com/guides/understanding-ember/debugging/.
I'm not actually sure what it's checking to be truthy/falsy, but you can always just use length. I'll update once I find it.
{{#if this.length}}
array not empty
{{else}}
array empty
{{/if}}
http://jsbin.com/qoyudape/3/edit
I have an index.html file which has a button with an action handler.
<button {{action 'modules'}} > press </button>
But nothing happens when I press the button.
please look at the code at jsbin:
http://jsbin.com/OREMORe/1/edit
Feel free to correct any other inconsistencies.
Appreciate any help. Thx.
You'd do it like this. Please note that there were a few things wrong with your code:
1) You handlebars code with your button in it was not wrapped in a handlebars script tag
2) You're 'modules' template was in the application template
3) You did not include valid links to the necessary libraries
4) There was not rootElement specified for the Application
5) You tried to access ModulesController in the ApplicationRoute. I inserted a redirect to 'modules'
6) You tried to access module in your {{#each}} loop, but that does not exists in your model. What you want is content.
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="modules">
<ul>
{{#each content}}
<li>{{this}}</li>
{{/each}}
<button {{action 'modules'}} > press </button>
</ul>
</script>
And:
var Test1 = Ember.Application.create({
rootElement: 'body',
ready: function() {
console.log("App ready1");
}
});
Test1.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('modules');
}
});
Test1.Router.map( function() {
this.route('modules');
});
Test1.ModulesController = Ember.Controller.extend({
actions: {
modules: function() {
console.log('clicked the button');
/* this.transitionToRoute('modules');*/
}
}
});
Test1.ModulesRoute = Ember.Route.extend({
model: function() {
return ['item1', 'item2'];
}
});
I've got an app with basic functionality built out. I'm not going through and adding additional features. In this case I need to convert a simple button, currently using linkTo, to a View. Problem is that I'm not sure how to convert one to the other and still keep the link intact.
How do I do this conversion? Here's the code I have now:
<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
{{#linkTo "account" account}}
<img {{bindAttr src="account.icon"}} />
{{/linkTo}}
{{/each}}
</script>
and here's the code I'm going to have:
<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
{{#view "Social.AccountButtonView"}}
<img {{bindAttr src="account.icon"}} />
{{/view}}
{{/each}}
</script>
Social.AccountButtonView = Ember.View.extend({
tagName: 'a',
classNames: ['item-account'],
click: function(){
// do something
}
});
I would assume that I'd be building on top of the click handler in the View, but I'm not sure how to pass the reference to item being iterated over, nor how to reference the correct route within the View.
Assistance please?
Update 1
The first version renders an href attribute with a value of #/accounts/4 based on the Router I have set up:
Social.Router.map(function() {
this.resource('accounts', function(){
this.resource('account', { path: ':account_id'});
});
});
When I convert the current code to a view, how do I mimic the functionality that linkTo provides?
You can define a property binding for account in your handlebars template.
This binding works like this:
<script type="text/x-handlebars">
<h1>App</h1>
{{#each item in controller}}
{{#view App.AccountView accountBinding="item"}}
<a {{bindAttr href="view.account.url"}} target="_blank">
{{view.account.name}}
</a>
{{/view}}
{{/each}}
</script>
Note that I added accountBinding, so the general rule is propertyName and Binding as a suffix. And remember that when you add a property to a view, you will not be able to access it directly, instead you will have to access it with view.propertyName as shown above.
Just keep in mind that you must have a View class when using the {{view}} helper:
window.App = Em.Application.create();
App.AccountView = Em.View.extend(); // this must exist
App.ApplicationRoute = Em.Route.extend({
model: function() {
return [
{id: 1, name: 'Ember.js', url: 'http://emberjs.com'},
{id: 2, name: 'Toronto Ember.js', url: 'http://torontoemberjs.com'},
{id: 3, name: 'JS Fiddle', url: 'http://jsfiddle.com'}];
}
})
Working fiddle: http://jsfiddle.net/schawaska/PFxHx/
In Response to Update 1:
I found myself in a similar scenario, and ended up creating a child view to mimic the {{linkTo}} helper. I don't really know/think it's the best implementation tho.
You can see my previous code here: http://jsfiddle.net/schawaska/SqhJB/
At that time I had created a child view within the ApplicationView:
App.ApplicationView = Em.View.extend({
templateName: 'application',
NavbarView: Em.View.extend({
init: function() {
this._super();
this.set('controller', this.get('parentView.controller').controllerFor('navbar'))
},
selectedRouteName: 'home',
gotoRoute: function(e) {
this.set('selectedRouteName', e.routeName);
this.get('controller.target.router').transitionTo(e.routePath);
},
templateName: 'navbar',
MenuItemView: Em.View.extend({
templateName:'menu-item',
tagName: 'li',
classNameBindings: 'IsActive:active'.w(),
IsActive: function() {
return this.get('item.routeName') === this.get('parentView.selectedRouteName');
}.property('item', 'parentView.selectedRouteName')
})
})
});
and my Handlebars looks like this:
<script type="text/x-handlebars" data-template-name="menu-item">
<a {{action gotoRoute item on="click" target="view.parentView"}}>
{{item.displayText}}
</a>
</script>
<script type="text/x-handlebars" data-template-name="navbar">
<ul class="left">
{{#each item in controller}}
{{view view.MenuItemView itemBinding="item"}}
{{/each}}
</ul>
</script>
I'm sorry I can't give you a better answer. This is what I could come up with at the time and haven't touched it ever since. Like I said, I don't think this is the way to handle it. If you are willing to take a look into the {{linkTo}} helper source code, you'll see a modular and elegant implementation that could be the base of your own implementation. I guess the part you're looking for is the href property which is being defined like so:
var LinkView = Em.View.extend({
...
attributeBindings: ['href', 'title'],
...
href: Ember.computed(function() {
var router = this.get('router');
return router.generate.apply(router, args(this, router));
})
...
});
So I guess, from there you can understand how it works and implement something on your own. Let me know if that helps.
To render a content of an array with emberjs we usually do the following
<ul>
{{#each controller}}
<li>{{name}} by {{artist}}</li>
{{/each}}
</ul>
How to make a live stream view like we have with twitter (of facebook) where a new stream is added on the top of the streams list ?
On the controller you can set the sortProperties see here to specify on which property the array should be sorted and you can set sortAscending (which is a boolean) to specify which direction the array should be sorted.
When you change the array the view will automatically update.
see this fiddle: http://jsfiddle.net/ZnMFK/2/
or this fiddle: http://jsfiddle.net/KfzFE/ to show the DOM gets updated when the array is changed.
HTML:
<script type="text/x-handlebars" data-template-name="index">
<div class="patient-view extended">
{{#each controller}}
<p>Name: {{name}}</p>
{{/each}}
</div>
</script>
App:
window.App = Em.Application.create();
App.Patient = Em.Object.extend({
order: undefined,
name: undefined
});
App.IndexView = Em.View.extend({
click: function() {
this.get('controller')
.set('sortAscending', !this.get('controller').get('sortAscending'));
}
});
App.IndexController = Em.ArrayController.extend({
sortProperties: ['order'],
sortAscending: false
});
App.IndexRoute = Em.Route.extend({
model: function() {
return Em.A([App.Patient.create({
name: "Bert",
order: 2
}), App.Patient.create({
name: "Ernie",
order: 1
})]);
}
});
I am following an example at "emberjs.com" which isn't going too well. I have a "GuestController" and "GuestView" within my application. I would like to use the "{{#view}} & {{#each}} to output an object called "guests" from the "GuestView". I am following this online example:
http://emberjs.com/documentation/#toc_displaying-a-list-of-items
fiddle: http://jsfiddle.net/exciter/MjA5A/8/
Here is the code:
APP CODE:
$(function(){
App = Ember.Application.create({
ready: function(){
//alert("APP INIT");
}
});
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: "application",
classNames: ['']
});
App.GuestController = Ember.Controller.extend();
App.GuestView = Ember.View.extend({
guests: [{name:"The Doctor" },
{name:"The Scientist" },
{name:"The Maestro"}]
});
App.initialize();
});
HTML:
<script type="text/x-handlebars" data-template-name="application">
{{#each App.GuestController}}
{{#view App.GuestView}}
{{guests}}
{{/view}}
{{/each}}
</script>
First of all, we use {{each}} block helper to iterate over an array of items, now when you say {{#each GuestController}} the controller should be of type Ember.ArrayController, and the {{#each GuestController}} looks for the content property inside the GuestController which will be used to iterate over, As per the example I think this is what you are trying to implement...Instead if you want to iterate over an Array inside a view check this