I've made a jsbin to illustrate my issue.
the binding seems KO with lastname property defined inside the itemController and the fullname value is not updated in my items loop.
What am I doing wrong ?
Controller for item in list is different than one you edit property lastname for, so it will never get updated. Propery lastname has to be specified as Model's property (if using Ember Data you simply don't use DS.attr for it and it won't be persisted). If you use custom library for data persistence you have to manually remove lastname property. You can use Ember Inspector extension to see that there are 5 controllers when you click on item. 4 for each item in list and one is being generated when you click. You edit property lastname for this fifth controller. To solve this you can use:
JavaScript:
App = Ember.Application.create();
App.Router.map(function() {
this.resource('items', function() {
this.resource('item', {path: '/:item_id'});
});
});
App.Model = Ember.Object.extend({
firstname: 'foo',
lastname: 'bar',
fullname: function() {
return this.get('firstname') + ' ' + this.get('lastname');
}.property('firstname', 'lastname')
});
App.ItemsRoute = Ember.Route.extend({
model: function() {
return [App.Model.create({id: 1}), App.Model.create({id: 2}), App.Model.create({id: 3}), App.Model.create({id: 4})];
}
});
App.ItemRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('items').findBy('id', +params.item_id);
}
});
Templates:
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{link-to "items" "items"}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="items">
<ul>
{{#each item in model}}
<li>
{{#link-to 'item' item.id}}
{{item.fullname}} {{item.id}}
{{/link-to}}
</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="item">
{{input value=model.firstname}}
{{input value=model.lastname}}
{{model.fullname}}
</script>
Please keep in mind that ArrayController and ObjectController aren't recommended to use, because they will be deprecated in future. Demo.
Related
According to official documentation, way to create itemcontroller is:
App.PostsController = Ember.ArrayController.extend({
itemController: 'post'
});
App.PostController = Ember.ObjectController.extend({
// the `title` property will be proxied to the underlying post.
titleLength: function() {
return this.get('title').length;
}.property('title')
});
But I'm not setting my ArrayController to App. It is set to a local variable behind a function scope. And the itemController property can only be string (according to documentation). So how do I set the itemController property?
My code looks like this:
var Channels=Ember.Object.extend({
list:Ember.ArrayController.create(
{
"model":[
{
"id":"display",
"label":"Display",
},{
"id":"social",
"label":"Social",
},{
"id":"email",
"label":"Email",
}
]
}
)
});
App.ChannelController=Ember.Controller.extend({
channels:Channels,
}));
<script type="text/x-handlebars" data-template-name='channel'>
<div>
{{#each channel in channels.list}}
{{channel.label}}
{{/each}}
</div>
</script>
I don't want to pollute App namespace with itemControllers that is to be used locally.
Update
Suppose my channels is like this:
var Channels=Ember.Object.extend({
list:Ember.ArrayController.create(
{
"model":[
{
"id":"display",
"label":"Display",
},{
"id":"social",
"label":"Social",
},{
"id":"email",
"label":"Email",
}
]
}
),
selected:"display"
});
and I want to something like this in template:
<script type="text/x-handlebars" data-template-name='channel'>
<h1>{{channels.selected}}</h1>
<div>
{{#each channel in channels.list}}
<div {{bind-attr class="channel.isselected:active:inactive"}}>{{channel.label}}</div>
{{/each}}
</div>
</script>
so that it outputs:
<h1>display</h1>
<div>
<div class="active">Display</div>
<div class="inactive">Social</div>
<div class="inactive">Email</div>
</div>
How do I do it with components?
You'll likely want to read the guide of components to get the full picture, but the gist of it is that you want to replace all item controllers with components. However, components will also replace the template inside of the each block as well. I don't entirely understand what's going on in your code, but here's an example roughly based on your code.
// Component
App.ChannelDisplayComponent = Ember.Component.extend({
channel: null,
isSelected: function() {
// Compute this however you want
// Maybe you need to pass in another property
}.property('channel')
});
{{! Component Template }}
<div {{bind-attr class="channel.isSelected:active:inactive"}}>
{{channel.label}}
</div>
{{!Channels Template}}
{{#each channel in channels.list}}
{{channel-component channel=channel}}
{{/each}}
The component is essentially your item controller, only it gets its own template as well.
You really shouldn't be worried about polluting the app namespace (unless you're having naming collisions, but that's a different issue). And as Kitler said, you should move to components instead of item controllers. But if you want to do this, the best way I can think of is overridding the (private) controllerAt hook.
var ItemController = Ember.Controller.extend({});
App.PostsController = Ember.ArrayController.extend({
controllerAt: function(idx, object, controllerClass) {
var subControllers = this._subControllers;
if (subControllers.length > idx) {
if (subControllers[idx]) {
return subControllers[idx];
}
}
var parentController = (this._isVirtual ? this.get('parentController') : this);
var controller = ItemController.create({
target: parentController,
parentController: parentController,
model: object
});
subControllers[idx] = controller;
return controller;
}
})
I'm trying to understand certain peculiarity.
Setting xxx property and iterating #each in one controller works, while seemingly same operation with yyy #each doesn't...
I'm including highlights of the code and the runnable code snippet:
App.IndexController = Ember.Controller.extend({
xxx : [{name:"a"}, {name:"b"}], // this works just fine
});
{{#each item in xxx}}
<li>{{item.name}}</li>
{{/each}}
App.ColorController = Ember.Controller.extend({
yyy : [{name:"c"}, {name:"d"}], // this triggers deprecation
// You attempted to access `yyy` from ...
// But object proxying is deprecated. Please use `model.yyy` instead
});
{{#each item in yyy}}
<li>{{item.name}}</li>
{{/each}}
App = Ember.Application.create();
App.Color = DS.Model.extend({
name: DS.attr('string')
});
App.Router.map(function() {
this.resource('color', function(){
this.route('show', { path: ':color_id' });
});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
{ id: 1, name: "Red" },
{ id: 2, name: "Blue" },
];
}
});
App.IndexController = Ember.Controller.extend({
xxx : [{name:"a"}, {name:"b"}], // this works just fine
});
App.ColorController = Ember.Controller.extend({
init : function() {
this._super();
console.info("Just to double check, this controller gets initialised");
},
yyy : [{name:"c"}, {name:"d"}], // this triggers deprecation
// You attempted to access `yyy` from ...
// But object proxying is deprecated. Please use `model.yyy` instead
});
<script type="text/x-handlebars">
<h2>Ember Starter Kit</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h3>Index</h3>
<ul>
{{#each color in model}}
<li>{{#link-to "color.show" color}} {{color.name}} {{/link-to}}</li>
{{/each}}
</ul>
<ul>
{{#each item in xxx}}
<li>{{item.name}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="color/show">
<h3>color/show</h3>
<h4>{{ model.name }}</h4>
<ul>
{{#each item in yyy}}
<li>{{item.name}}</li>
{{/each}}
</ul>
{{#link-to "application"}}Go back to the list{{/link-to}}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember-data.js"></script>
I'd like to learn more:
why it works in one case and doesn't work in another?
what is the Ember way of fixing it?
EDIT: Updated code snippet include Color model. To trigger deprecation warning click on one of the colours (Red, Blue)... This is what happens when I run the snippet:
Okay, as I expected - problem lies in naming conventions and relics of the past(ObjectController). Declaring ColorController creates controller for model, not a route. You need here controller for route, so changing ColorController to ColorShowController solves problem and values render. Deprecation's gone.
App = Ember.Application.create();
App.Color = DS.Model.extend({
name: DS.attr('string')
});
App.Router.map(function() {
this.resource('color', function(){
this.route('show', { path: ':color_id' });
});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
{ id: 1, name: "Red" },
{ id: 2, name: "Blue" },
];
}
});
App.IndexController = Ember.Controller.extend({
xxx : [{name:"a"}, {name:"b"}], // this works just fine
});
App.ColorShowController = Ember.Controller.extend({
init : function() {
this._super();
console.info("Just to double check, this controller gets initialised");
},
yyy : [{name:"c"}, {name:"d"}], // this triggers deprecation
// You attempted to access `yyy` from ...
// But object proxying is deprecated. Please use `model.yyy` instead
});
<script type="text/x-handlebars">
<h2>Ember Starter Kit</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h3>Index</h3>
<ul>
{{#each color in model}}
<li>{{#link-to "color.show" color}} {{color.name}} {{/link-to}}</li>
{{/each}}
</ul>
<ul>
{{#each item in xxx}}
<li>{{item.name}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="color/show">
<h3>color/show</h3>
<h4>{{ model.name }}</h4>
<ul>
{{#each item in yyy}}
<li>{{item.name}}</li>
{{/each}}
</ul>
{{#link-to "application"}}Go back to the list{{/link-to}}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember-data.js"></script>
What I'm trying to do is very basic but I'm having very little luck...
Simply enough, I don't want to display a chunk of HTML until a certain Ember Data model property is fully loaded.
As you can see from the jsfiddle, the parent model: App.Person gets loaded into the DOM and it also loads the 3 placeholders for its hasMany property belts.
It then executes the request to populate App.Belt and fills in the placeholders.
While this is usually ok, it makes a big mess of things when trying to build an SVG, for example. Since the surrounding <svg> tags will get appended to the DOM immediately and then some time down the track (once the asynchronous request returns data), the inner svg components will be added between the tags. This usually creates browser rendering errors.
TL;DR
In the example, how do I defer the <h3>...</h3> section of the template from being added to the DOM until the model data and its relationships (belts) are fully loaded? This way everything gets visually and physically added to the DOM at once.
The JS:
// Create Ember App
App = Ember.Application.create();
// Create Ember Data Store
App.store = DS.Store.create({
revision: 11,
//Exagerate latency to demonstrate problem with relationships being loaded sequentially.
adapter: DS.FixtureAdapter.create({latency: 5000})
});
// Create parent model with hasMany relationship
App.Person = DS.Model.extend({
name: DS.attr( 'string' ),
belts: DS.hasMany( 'App.Belt' )
});
// Create child model with belongsTo relationship
App.Belt = DS.Model.extend({
type: DS.attr( 'string' ),
parent: DS.belongsTo( 'App.Person' )
});
// Add Parent fixtures
App.Person.FIXTURES = [{
"id" : 1,
"name" : "Trevor",
"belts" : [1, 2, 3]
}];
// Add Child fixtures
App.Belt.FIXTURES = [{
"id" : 1,
"type" : "leather"
}, {
"id" : 2,
"type" : "rock"
}, {
"id" : 3,
"type" : "party-time"
}];
// Set route behaviour
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
},
renderTemplate: function() {
this.render('people');
}
});
The HTML/HBS:
<script type="text/x-handlebars">
<h1>Application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="people">
<h3>Don't load this header until every belt defined in App.Person.belts is loaded</h3>
<ul>
{{#each controller}}
{{debugger}}
<li>Id: {{id}}</li>
<li>Name: {{name}}</li>
<li>Belt types:
<ul>
{{#each belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
The fiddle: http://jsfiddle.net/zfkNp/4/
Check for the controller.content.length and belts.isLoaded, See the jsfiddle for a solution.
<script type="text/x-handlebars" id="people">
{{#if controller.ready}}
<h3>Don't load this header until every belt defined in App.Person.belts is loaded</h3>
{{/if}}
<ul>
{{#each controller}}
{{debugger}}
{{#if belts.isLoaded}}
<li>Id: {{id}}</li>
<li>Name: {{name}}</li>
<li>Belt types:
<ul>
{{#each belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/if}}
{{/each}}
</ul>
</script>
App.IndexController = Ember.ArrayController.extend({
content: null,
ready:function() {
return this.get('content.length')>0
}.property('content.length')
});
Given the following code, I thought the person.index and nested person.finish routes would use the PersonController content/model property since theirs was empty/undefined? What am I doing wrong? http://jsfiddle.net/EasyCo/MMfSf/5/
To be more concise: When you click on the id, the {{id}} and {{name}} are blank? How do I fix that?
Functionality
// Create Ember App
App = Ember.Application.create();
// Create Ember Data Store
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
// Create parent model with hasMany relationship
App.Person = DS.Model.extend({
name: DS.attr( 'string' ),
belts: DS.hasMany( 'App.Belt' )
});
// Create child model with belongsTo relationship
App.Belt = DS.Model.extend({
type: DS.attr( 'string' ),
parent: DS.belongsTo( 'App.Person' )
});
// Add Person fixtures
App.Person.FIXTURES = [{
"id" : 1,
"name" : "Trevor",
"belts" : [1, 2, 3]
}];
// Add Belt fixtures
App.Belt.FIXTURES = [{
"id" : 1,
"type" : "leather"
}, {
"id" : 2,
"type" : "rock"
}, {
"id" : 3,
"type" : "party-time"
}];
App.Router.map( function() {
this.resource( 'person', { path: '/:person_id' }, function() {
this.route( 'finish' );
});
});
// Set route behaviour
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
},
renderTemplate: function() {
this.render('people');
}
});
Templates
<script type="text/x-handlebars">
<h1>Application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="people">
<h2>People</h2>
<ul>
{{#each controller}}
<li>
<div class="debug">
Is the person record dirty: {{this.isDirty}}
</div>
</li>
<li>Id: {{#linkTo person this}}{{id}}{{/linkTo}}</li>
<li>Name: {{name}}</li>
<li>Belt types:
<ul>
{{#each belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="person">
<h2>Person</h2>
Id from within person template: {{id}}<br><br>
{{outlet}}
</script>
<script type="text/x-handlebars" id="person/index">
Id: {{id}}<br>
Name: <a href="#" {{action "changeName"}}>{{name}}</a><br><br>
{{#linkTo index}}Go back{{/linkTo}}<br>
{{#linkTo person.finish}}Go to finish{{/linkTo}}
</script>
<script type="text/x-handlebars" id="person/finish">
<h2>Finish</h2>
{{id}}
</script>
You can use this in your router:
model: function() {
return this.modelFor("person");
}
Instead of your's:
controller.set('content', this.controllerFor('person'));
Your views were served through different controllers, either Ember's generated one or the one you defined PersonIndexController and that contributed to the issue you were facing. Instead of patching your original example to make it work, i instead reworked it to show you how you should structure your views/routes to leverage Emberjs capabilities.
You should design your application/example as a series of states working and communicating with each other and captured in a Router map. In your example, you should have a people, person resource and a finish route with corresponding views and controllers, either you explicitly create them or let Ember do that for you, providing you're following its convention.
Here's a working exemple and below I highlighted some of the most important parts of the example
<script type="text/x-handlebars" data-template-name="people">
<h2>People</h2>
<ul>
{{#each person in controller}}
<li>
<div class="debug">
Is the person record dirty: {{this.isDirty}}
</div>
</li>
<li>Id: {{#linkTo 'person' person}}{{person.id}}{{/linkTo}}</li>
<li>Name: {{person.name}}</li>
<li>Belt types:
<ul>
{{#each person.belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="person">
<h2>Person</h2>
Id from within person template: {{id}}<br><br>
Id: {{id}}<br>
Name: <a href="#" {{action "changeName"}}>{{name}}</a><br><br>
{{#linkTo index}}Go back{{/linkTo}}<br>
{{#linkTo person.finish}}Go to finish{{/linkTo}}
{{outlet}}
</script>
Models, Views, Controllers and Route definitions
DS.RESTAdapter.configure("plurals", { person: "people" });
App.Router.map( function() {
this.resource('people',function() {
this.resource('person', { path: ':person_id' }, function() {
this.route( 'finish');
});
})
});
App.PeopleController = Ember.ArrayController.extend();
App.PeopleRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
}
})
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('people');
}
});
App.PersonRoute = Ember.Route.extend({
model: function(params) {
debugger;
return App.Person.find(params.client_id);
},
renderTemplate: function() {
this.render('person',{
into:'application'
})
}
})
App.PersonFinishRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('finish',{
into:'application'
})
}
})
I'm trying to render a view Team inside of an {{outlet}}. This Team view is comprised of a simple Person view (the team leader), and a collection of Person views (team members). The outlet is set up by calling connectOutlet() on the ApplicationController.
Although the Person child views are rendered in the markup as expected, all the values of name are missing. It sure seems like my bindings and/or controller are not set up properly. What am I missing?
Code and demo: http://jsfiddle.net/aek38/fkKFJ/
The relevant handlebar templates are:
<script type="text/x-handlebars" data-template-name="app">
<div class="container">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="person">
<em>Person name is:</em> {{name}}
</script>
<script type="text/x-handlebars" data-template-name="team">
<h3>Team Leader</h3>
<em>Leader name should be:</em>{{leader.name}}
{{view App.PersonView contentBinding="leader"}}
<h3>Team Members</h3>
{{#collection contentBinding="members"}}
{{view App.PersonView contentBinding="content"}}
{{/collection}}
</script>
Code snippet:
App = Ember.Application.create({
ready: function() {
this.initialize();
},
ApplicationController: Ember.Controller.extend(),
ApplicationView: Ember.View.extend({
templateName: "app"
}),
Person: Ember.Object.extend({
name: "Jane Doe"
}),
PersonController: Ember.ObjectController.extend(),
PersonView: Ember.View.extend({
templateName: "person"
}),
Team: Ember.Object.extend({
members: [],
leader: null
}),
TeamController: Ember.ObjectController.extend(),
TeamView: Ember.View.extend({
templateName: "team"
}),
// ...
You can use
{{view App.PersonView contextBinding="leader"}}
and use {{#each}} instead of {{#collection}} for the members
http://jsfiddle.net/LQTsV/1/
Not very sure whats going on but I tweaked your fiddle to get it working:
http://jsfiddle.net/lifeinafolder/sPcwv/
Seems as if bindings are not working properly in the sense:
contentBinding="this"
works but
contentBinding="this.leader"
doesn't.
Sorry but I couldn't work it out more.
You're setting the content variable on person view via contentBinding that should probably be personBinding. And then in your template you should get the view.person.name.
{{collection}} should be a {{each}} block.
{{#each members}}
{{view App.PersonView personBinding="this"}}
{{/each}}
And this person template will look in the right location for the name.
<script type="text/x-handlebars" data-template-name="person">
<em>Person name is:</em> {{view.person.name}}
</script>
Didn't change your js.
fiddle: http://jsfiddle.net/albertjan/fkKFJ/9/