あなたの質問がよくわかりません。以下の解決策の何が問題になっていますか? (元の jsFiddle はこちら) (更新された jsFiddle はこちら)
(更新: スケルトン ルーターを追加)
JavaScript / 残り火:
// Application
App = Ember.Application.create({
ApplicationController: Ember.Controller.extend(),
ApplicationView: Ember.View.extend({
templateName: "application-view",
}),
Router: Ember.Router.extend({
// initialState of Ember.Router is "root"
root: Ember.Route.extend({
// "index" can be called whatever we want
index: Ember.Route.extend({
route: '/',
enter: function(router) {
console.log("entering root.index from", router.get('currentState.name'));
},
connectOutlets: function(router) {
console.log("entered root.index, fully transitioned to", router.get('currentState.path'));
// Demo: read and write from router's connectOutlets
console.log("Router says, A:", App.get("aController").get('content'));
console.log("Router says, B:", App.get("bController").get('content'));
App.get("aController").pushObject({name: "Network switch", color: "beige", type: "Cisco"});
console.log("Router says, A:", App.get("aController").get('content'));
console.log("Router says, B:", App.get("bController").get('content'));
}
})
// ...
// (add routes here)
// ...
})
})
});
// Controllers
App.aController = Ember.ArrayController.create({
content: [],
addContact: function(contact) {
this.content.push(contact);
}
});
App.bController = Ember.Object.create({
contentBinding: "App.aController.content"
});
// Demo: Change a (shows up in b)
App.aController.set('content', [
{name: "Apple", color: "red", type: "fruit"},
{name: "Banana", color: "yellow", type: "fruit"},
{name: "Sports car", color: "black", type: "vehicle"},
{name: "Sun", color: "white", type: "star"},
]);
// Demo: Change b (shows up in a)
(function() {
var temp = App.aController.get('content');
temp.push({name: "Linus", color: "n/a", type: "human"});
App.bController.set('content', temp);
})();
HTML / ハンドルバー:
<script type="text/x-handlebars" data-template-name="application-view">
<div id="my-app">
<h1>aController</h1>
{{#collection tagName="ul" contentBinding="App.aController.content"}}
{{#with view.content}}
Name: {{name}}, Color: {{color}}, Type: {{type}},
{{/with}}
{{/collection}}
<h1>bController</h1>
{{#collection tagName="ul" contentBinding="App.bController.content"}}
{{#with view.content}}
Name: {{name}}, Color: {{color}}, Type: {{type}},
{{/with}}
{{/collection}}
</div>
</script>