我有一个“多选择器”组件,该组件接收对象数组作为参数。
我需要找到一种在组件内部克隆参数的方法,以便当我对它进行更改时,传递的原始数组不会改变,从而使作用范围变得混乱。
这是我的例子。我想items
在不触摸states
模型中的数组的情况下更改组件数组中的元素的问题。
组件:
import Ember from 'ember';
export default Ember.Component.extend({
update: function() {
var ids = [];
this.get('items').map(function(item) {
if(item.checked) {
ids.push(item.id);
}
});
this.sendAction('updateAction', ids);
}.observes('[email protected]')
});
和模板:
<div class="multi-selector">
{{#each item in items}}
<div class="checkbox">
<label>
{{input type="checkbox" checked=item.checked}}
{{item.title}}
</label>
</div>
{{/each}}
</div>
我的称呼方式是:
{{multi-selector
items=model.states
updateAction='selectStatesFromMultiSelector'
}}
在这种情况下,我们不能使用oneWayBindings,因为数组中的元素仍然只是引用。
单向绑定仅在一个方向上传播更改。
在这种情况下,生成自己的内部列表应该会更好:
import Ember from 'ember';
export default Ember.Component.extend({
listItems: null,
makeItem: function(item) {
return Ember.Object.create(item.getProperties('id', 'checked', 'title'));
}),
cloneItems: function() {
this.set('listItems', this.get('items').map(this.makeItem));
}.observes('items'),
update: function() {
var ids = [];
this.get('listItems').map(function(item) {
if(item.checked) {
ids.push(item.id);
}
});
this.sendAction('updateAction', ids);
}.observes('[email protected]')
});
并在模板中使用listItems
<div class="multi-selector">
{{#each item in listItems}}
<div class="checkbox">
<label>
{{input type="checkbox" checked=item.checked}}
{{item.title}}
</label>
</div>
{{/each}}
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句