如何从原始对象中“隔离”传递给EmberJS组件的属性

米海·斯库图(Mihai Scurtu)

我有一个“多选择器”组件,该组件接收对象数组作为参数。

我需要找到一种在组件内部克隆参数的方法,以便当我对它进行更改时,传递的原始数组不会改变,从而使作用范围变得混乱。

这是我的例子。我想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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React.js-如何将属性对象传递给子组件?

如何在Vuetify中访问插槽对象属性以传递给给定数据表行的组件?

如何将数组属性传递给Ember组件?

AngularJS将属性中的URL传递给指令的隔离范围-意外令牌':'

角度2:如何将属性传递给子组件?

如何将组件对象传递给React.js中的容器?

如何在一个组件中定义属性并传递给reactJs中的另一个组件?

将对象或对象密钥传递给VueJs中的组件

如何将异步数据传递给对象中的子组件(Angular6)

Vue:如何使传递给组件的对象具有反应性?

如何将对象作为道具传递给React.js中的子功能组件?

如何将属性传递给标签导航器中的本地组件?

如何将自定义属性传递给功能组件中的样式组件?

如何遍历通过Vuex Store和计算属性传递给组件的对象数组?

如何将函数作为属性传递给React组件?

如何将对象的属性作为prop传递给vue.js组件

使用属性传递给组件

如何将Observable属性传递给Angular2中的组件?

如何将属性传递给无状态/功能组件?

如何将属性传递给 React 函数组件?

如何从子组件中的对象中获取数据并将其传递给 React 中父组件中的方法

如何将对象传递给 Angular 9 中的其他组件

如何将 HTML 属性传递给 React 中的子组件?

如何将 typescript 对象传递给 Vue 组件

如何将道具(从获取对象)传递给子组件

如何将嵌套对象的道具传递给组件?

如何将 vmodel 属性传递给 nuxjs 中的子组件

如何将接口和其他类型的对象传递给 React 中的功能组件?

如何将属性从反应组件传递给其父级?