1
比方說，我想建立一個小商店與兩種不同的產品類型fruits和vegetables。每個店鋪都有自己的頁面，分別有什麼分開的路線，控制器和模型。對於這兩個產品類別，我想計算'訂購'項目的總和。如何在Ember.js中使用「needs」控制器的計算屬性？
在第三頁，稱爲「總計」，我想同時顯示總和（水果和蔬菜）和兩者的總和。因此，我正在加載產品類型的兩個控制器，如下所示：needs: ['BasketsFruits', 'BasketsVegetables']。
問題：爲什麼當我改變其他頁面上的項目數量時，水果和蔬菜的總和沒有在總頁數上更新？我的一般方法是正確的嗎？
例如：除總數頁面上的總和以外的所有工作。 Example in a jsbin
$(function() {
App = Em.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.ApplicationController = Em.Controller.extend();
App.BasketsFruitsController = Ember.ArrayController.extend({
totalSum: function() {
var sum = 0;
this.forEach(function (entry) {
sum += parseInt(entry.get('quant'));
});
return sum;
}.property('@each.quant')
});
App.BasketsVegetablesController = Ember.ArrayController.extend({
totalSum: function() {
var sum = 0;
this.forEach(function (entry) {
sum += parseInt(entry.get('quant'));
});
return sum;
}.property('@each.quant')
});
App.BasketsTotalsController = Ember.ObjectController.extend({
needs: ['BasketsFruits', 'BasketsVegetables'],
fruits: Ember.computed.alias("controllers.BasketsFruits.totalSum"),
vegetables: Ember.computed.alias("controllers.BasketsVegetables.totalSum")
});
App.Fruits = DS.Model.extend({
title: DS.attr('string'),
color: DS.attr('string'),
quant: DS.attr('int')
});
App.Vegetables = DS.Model.extend({
title: DS.attr('string'),
season: DS.attr('string'),
quant: DS.attr('int')
});
App.Fruits.FIXTURES = [
{
id: 1,
title: 'Banana',
color: 'yellow',
quant: 0
},
{
id: 2,
title: 'Apple',
color: 'red',
quant: 0
},
{
id: 3,
title: 'Melon',
color: 'green',
quant: 0
}
];
App.Vegetables.FIXTURES = [
{
id: 1,
title: 'Asparagus',
season: 'spring',
quant: 0
},
{
id: 2,
title: 'Pumpkin',
season: 'fall',
quant: 0
},
{
id: 3,
title: 'Cabbage',
season: 'winter',
quant: 0
}
];
App.Router.map(function() {
this.resource('index', { path: '/' });
this.resource('baskets', { path: 'baskets' } , function() {
this.route('index', { path: '/' });
this.route('fruits', { path: 'fruits' });
this.route('vegetables', { path: 'vegetables' });
this.route('totals', { path: 'totals' });
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('baskets');
}
});
App.BasketsIndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('baskets.fruits');
}
});
App.BasketsFruitsRoute = Ember.Route.extend({
model: function() {
return this.store.find('Fruits');
},
renderTemplate: function() {
this.render('fruits');
}
});
App.BasketsVegetablesRoute = Ember.Route.extend({
model: function() {
return this.store.find('Vegetables');
},
renderTemplate: function() {
this.render('vegetables');
}
});
App.BasketsTotalsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('totals');
}
});
});a {
cursor: pointer;
}
.nav-tabs>li {
display: inline-block;
border: 1px solid black;
border-bottom: none;
margin: 2px 2px 0 0;
padding: 2px;
}
.nav-tabs>li.active {
color: white;
background-color: black;
}
.nav-tabs {
border-bottom: 1px solid black;
}
#main {
border: 1px solid black;
padding: 5px;
}<script type="text/x-handlebars" data-template-name="application">
<ul class="nav nav-tabs">
{{#link-to "baskets.fruits" class="button" tagName="li"}}
<a {{bind-attr href="view.href"}}>Fruit Basket</a>
{{/link-to}}
{{#link-to "baskets.vegetables" class="button" tagName="li"}}
<a {{bind-attr href="view.href"}}>Vegetable Basket</a>
{{/link-to}}
{{#link-to "baskets.totals" class="button" tagName="li"}}
<a {{bind-attr href="view.href"}}>Totals</a>
{{/link-to}}
</ul>
<div id="main">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="fruits">
Select your fruits:
<ul>
{{#each item in model}}
<li>
{{item.title}} ({{item.color}})
{{input
type="number"
step="1"
placeholder="0"
value=item.quant
}}
</li>
{{/each}}
</ul>
You have {{totalSum}} fruits.
</script>
<script type="text/x-handlebars" data-template-name="vegetables">
Select your vegetables:
<ul>
{{#each item in model}}
<li>
{{item.title}} ({{item.season}})
{{input
type="number"
step="1"
placeholder="0"
value=item.quant
}}
</li>
{{/each}}
</ul>
You have {{totalSum}} vegetables.
</script>
<script type="text/x-handlebars" data-template-name="totals">
What you have selected:
<p>{{fruits}} fruits and {{vegetables}} vegetables</p>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.8.1/ember.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.12/ember-data.js"></script>
你把所有的代碼 - 爲什麼不把這個扔進jsbin？只是說...;） – Kalman 2015-02-24 17:07:14
@KalmanHazins：我對jsbin不熟悉？這裏的代碼片斷是什麼？ – Simon 2015-02-24 17:08:27
@KalmanHazins做到了。 – Simon 2015-02-24 17:12:13