Ember.js 您在一次渲染中修改了***两次
升级到1.13后,我遇到了这个异常,我无法找出问题所在。我也找不到任何有用的资源来解决我的问题 这种情况发生在我在另一个计算属性中设置的属性上。但是这个属性肯定只调用一次 我创建了一个jsbin示例: 更新 根据要求,我发布了一些更接近我的实际实现的代码Ember.js 您在一次渲染中修改了***两次,ember.js,Ember.js,升级到1.13后,我遇到了这个异常,我无法找出问题所在。我也找不到任何有用的资源来解决我的问题 这种情况发生在我在另一个计算属性中设置的属性上。但是这个属性肯定只调用一次 我创建了一个jsbin示例: 更新 根据要求,我发布了一些更接近我的实际实现的代码 Ember.Controller.extend({ filter: '', resultCount: { total: 0, matches: 0, mismatches: 0 }, results
Ember.Controller.extend({
filter: '',
resultCount: {
total: 0,
matches: 0,
mismatches: 0
},
results: function() {
var items = this.get('model'),
matches = [],
resultCount = {};
// Apply search filter
matches = items.filter(function(item){
// Just a dummy filter function
return true;
});
// We need the total number matched by the filter string
resultCount.total = matches.length;
// The already matched items must be narrowed further down
matches = matches.filter(function(item) {
// Another filter function
return true;
});
resultCount.matches = matches.length;
resultCount.mismatches = resultCount.total - matches.length;
this.set('resultCount', resultCount);
return matches;
}.property('model', 'filter'),
});
尽量使您的属性不设置其他属性,而是相互依赖:
App.IndexController = Ember.Controller.extend({
count: function() {
return this.get("data.length") || 0;
}.property('data.length'),
data: [1,2,3]
});
更新
基本上,您的resultCount是一个临时变量,我们可以去掉它,其余的只是将计算属性链接在一起:
代码:
//索引控制器
App.IndexController=Ember.Controller.extend({
计数:Ember.computed('filteredItems.length',function(){
返回this.get('filteredItems.length');
}),
数据:[
创建({name:“jim”,年龄:15}),
创建({name:“jeff”,年龄:42}),
创建({name:“eric”,年龄:7})
],
筛选器:RegExp(“.”),
年龄过滤器:-1,
不匹配计数:Ember.computed('filteredItems.length','secondPassFilteredItems.length',函数(){
返回this.get('filteredItems.length')-this.get('secondPassFilteredItems.length');
}),
filteredItems:Ember.computed('data','filter',function(){
var控制器=此;
返回此.get('data').filter(函数(项){
返回item.get('name').match(controller.get(“filter”);
});
}),
secondPassFilteredItems:Ember.computed('filteredItems','ageFilter',function(){
var控制器=此;
var ageFilter=controller.get(“ageFilter”);
if(余烬等质量(ageFilter,-1)){
返回此.get('filteredItems');
}否则{
返回此.get('filteredItems').filter(函数(项){
//更多过滤
return item.get(“age”)Thx-但不幸的是,这不是那么容易。这是我创建的一个非常简单的示例。在我的应用程序中有更多的逻辑。因此在“someData”中属性我必须过滤掉模型,并且必须计算我有多少个过滤项。这不仅是一个计数,而且是多个值。同样的原则适用。避免在计算属性中设置。尝试将每个计数提取到计算属性中。如果你想发布一个更为复杂的更接近实际情况的示例,我们可以看到我们所做的可以。好的,我刚刚用一个例子更新了原始帖子。这或多或少就是我所拥有的。也许我应该拆分计算属性。一个属性返回第一个匹配项,另一个属性返回第二个匹配项。然后创建一个计算计数属性,该属性对两个匹配项进行计数。这是方法吗?啊谢谢你为这个详细的例子所做的努力。不过,我没有找到“匹配”属性的链接。看起来我像个孤儿。
// Index controller
App.IndexController = Ember.Controller.extend({
count: Ember.computed('filteredItems.length', function(){
return this.get('filteredItems.length');
}),
data: [
Ember.Object.create({ name: "jim", age: 15 }),
Ember.Object.create({ name: "jeff", age: 42 }),
Ember.Object.create({ name: "eric", age: 7 })
],
filter: RegExp(".*"),
ageFilter: -1,
mismatchCount: Ember.computed('filteredItems.length', 'secondPassFilteredItems.length', function() {
return this.get('filteredItems.length') - this.get('secondPassFilteredItems.length');
}),
filteredItems: Ember.computed('data', 'filter', function() {
var controller = this;
return this.get('data').filter(function(item) {
return item.get('name').match(controller.get("filter"));
});
}),
secondPassFilteredItems: Ember.computed('filteredItems', 'ageFilter', function() {
var controller = this;
var ageFilter = controller.get("ageFilter");
if (Ember.isEqual(ageFilter, -1)) {
return this.get('filteredItems');
} else {
return this.get('filteredItems').filter(function(item) {
// more filtering
return item.get("age") <= ageFilter;
});
}
}),
results: Ember.computed.alias('secondPassFilteredItems'),
actions: {
filterByJ: function() {
this.set('filter', new RegExp("j"));
},
filterByEric: function() {
this.set('filter', new RegExp("eric"));
},
filterAllNames: function() {
this.set('filter', new RegExp(".*"));
},
filterYoungins: function() {
this.set('ageFilter', 15);
},
filterAllAges: function() {
this.set('ageFilter', -1);
}
}
});
<script type="text/x-handlebars" data-template-name="index">
<p>Results found: {{count}}</p>
<p>Diff between first and second filter: {{mismatchCount}}</p>
<p>First Filter:
<button {{action 'filterAllNames'}}>all people</button>
<button {{action 'filterByJ'}}>People with J in name</button>
<button {{action 'filterByEric'}}>People named 'eric'</button>
</p>
<p> Second Filter:
<button {{action 'filterAllAges'}}>all ages</button>
<button {{action 'filterYoungins'}}>15 years old or younger</button>
</p>
<ul>
{{#each results as |item|}}
<li>{{item.name}} is {{item.age}} years old</li>
{{/each}}
</ul>
</script>