Ember ArrayController binding to view - arrays

Question

I've snipped out the init function which sets up the initials array.
This is an array of arays indexed as "A", "B", "C" etc.
Each of these contains station object that begin with that letter.
I have buttons that fire off setByInitial which copy the relevant initial array into content.
this.content.setObjects(this.initials[initial])
works fine and my view updates, but is horribly slow (150ms +) station objects are pertty big and there are over 3500 of them...
this.set("content",Ember.copy(this.initials[initial],true))
Is much fatser (around 3ms) updated the content aray (as can be seen with some logging to console), but does not cause the view to update.
this.set("content",this.initials[initial])
is even faster, but also does not update the view.
I've tried using arrayContentDidChange() etc. but can't get that to work either.
How do I inform the view that this dfata has changed if I use the faster method? Or is there another wau to do this?
App.StationListController = Ember.ObjectController.extend({
content : [],
initials : [],
setByInitial : function(initial)
{
// this.content.setObjects(this.initials[initial])
this.set("content",Ember.copy(this.initials[initial],true))
}
});
<script type="text/x-handlebars" id="stationList">
<ul>
{{#each content}}
<li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
{{/each}}
</ul>
</script>
Thanks to #mike-grassotti example I can see that what I was doing ought to work, but it still doesn't! As is often the case, what I have posted here is a simplification. My real app is not so straight forward...
My index template contain several views. Each view has it's own data and controller. So it seems it's something in that complexity which is breaking it. So, I've started with Mike's example and added just a little - in order to move towards what I really want - and promptly broken it!
I now have:
var App
= Ember.Application.create({})
App.Router.map(function() {
this.resource('index', {path: '/'});
this.resource('station', {path: '/:code/:name'});
this.resource('toc', {path: '/toc/:code/:name'});
});
App.Station = Ember.Object.extend({});
App.IndexController = Ember.ObjectController.extend({
needs : ["StationList"],
listStationsByInitial: function(initial)
{
this.get("controllers.StationList").listByInitial(initial)
}
});
App.StationListView = Em.View.extend({
stationsBinding : 'App.StationListController',
init : function()
{
console.log("view created",this.stations)
}
});
App.StationListController = Ember.ArrayController.extend({
content : [],
initials : [[{u:1,n:'Abe'},{u:2,n:'Ace'}],[{u:3, n:'Barb'},{u:4,n:'Bob'}],[{u:5,n:'Card'},{u:6,n:'Crud'}]],
init : function()
{
this.set("content",this.initials[0])
},
listByInitial : function(initial)
{
this.set("content",this.initials[initial])
console.log('StationListController',this.content);
}
});
and
t type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<button {{action listStationsByInitial '0'}}>A</button>
<button {{action listStationsByInitial '1'}}>B</button>
{{#view App.StationListView controllerBinding="App.StationListController"}}
<ul>
{{#each stations}}
<li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
{{else}}
<li>No matching stations</li>
{{/each}}
</ul>
<button {{action listByInitial '2'}}>C</button>
{{/view}}}
</script>
Firstly, I no longer see the list of station rendered. Neither initially, nor on the click of a button.
I expected {{#with content}} to get the data from App.StationListController.content, but that didn't work. So, I created App.StationListView with a binding stationsBinding to that controller. Still no joy...
What am I doing wrong here?
Secondly, my function listStationsByInitial is called when I click button A or B. So I'd expect listByInitial (in StationListController) to be called when I click button C (since it's inside of the view where I've said to use StationListController). But instead I get an error:
error: assertion failed: The action 'listByInitial' did not exist on App.StationListController
Why doesn't that work?
I'm doubly frustrated here because I have already build a pretty large and complex Ember app (http://rail.dev.hazardousfrog.com/train-tickets) using 1.0.pre version and am now trying to bring my konwledge up-to-date with the latest version and finding that almost nothing I learned applies any more!

Answer 1

How do I inform the view that this dfata has changed if I use the faster method?
You should not have to inform the view, this is taken care of via bindings. I can't see anything in your example that would prevent bindings from updating automatically, and made a simple jsFiddle to demonstrate. Given the following, the list of stations is modified when user hits one of the buttons and view updates automatically:
App = Ember.Application.create({});
App.Router.map( function() {
this.route('stationList', {path: '/'});
this.route('station', {path: '/station/:station_id'});
});
App.Station = Ember.Object.extend({});
App.StationListController = Ember.ObjectController.extend({
content : [],
initials : [
[{u:1,n:'Abe'}, {u:2,n:'Ace'}], [{u:1,n:'Barb'}, {u:2,n:'Bob'}]
],
setByInitial : function(initial)
{
console.log('setByInitial', initial);
this.set("content",this.initials[initial])
}
});
<script type="text/x-handlebars" id="stationList">
<h2>Stations:</h2>
<button {{action setByInitial '0'}}>A</button>
<button {{action setByInitial '1'}}>B</button>
<ul>
{{#each content}}
<li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
{{/each}}
</ul>
</script>
See: http://jsfiddle.net/mgrassotti/7f4w7/1/