あなたの例をつまらないものにするのではなく、ここに私が取り組んだ簡単な例を示しDS.FixtureAdapter
ます。応答が規則に従っていると仮定すると、アダプターを に切り替えた後も同様に機能するはずですDS.RESTAdapter
。
Office = Em.Application.create();
Office.Store = DS.Store.extend({
adapter: "DS.FixtureAdapter"
});
Office.Router.map(function() {
this.resource("customers", function() {
this.resource("customer", { path: ":customer_id" });
});
});
Office.IndexRoute = Em.Route.extend({
redirect: function() {
this.transitionTo("customers");
}
});
Office.CustomersRoute = Em.Route.extend({
model: function() {
return Office.Customer.find();
}
});
Office.OrdersRoute = Em.Route.extend({
model: function() {
return Office.Order.find();
}
});
Office.Customer = DS.Model.extend({
name: DS.attr("string"),
orders: DS.hasMany("Office.Order")
});
Office.Order = DS.Model.extend({
mode: DS.attr("string"),
price: DS.attr("number")
});
Office.Customer.FIXTURES = [{
id: 1,
name: "Stan Smith",
orders: [1, 2]
}, {
id: 2,
name: "Brian Griffin",
orders: [3, 4, 5]
}];
Office.Order.FIXTURES = [{
id: 1,
mode: "abcd",
price: 12.34
}, {
id: 2,
mode: "efgh",
price: 15.99
}, {
id: 3,
mode: "ijkl",
price: 1.99
}, {
id: 4,
mode: "mnop",
price: 3.49
}, {
id: 5,
mode: "qrst",
price: 9.99
}];
テンプレート:
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="customers">
{{#each model}}
<div>
{{#linkTo "customer" this}}
{{name}}
{{/linkTo}}
</div>
{{/each}}
<hr>
{{outlet}}
</script>
<script type="text/x-handlebars" id="customer">
<h2>{{name}}</h2>
<p>Has {{orders.length}} orders</p>
{{render "orders" orders}}
</script>
<script type="text/x-handlebars" id="orders">
<h3>Orders</h3>
{{#each model}}
<div>{{mode}} - {{price}}</div>
{{/each}}
</script>