mercredi 24 décembre 2014

How do I "isolate" properties passed to EmberJS components from the original objects

I have a "multi-selector" component that receives an array of objects as a parameter.


I need to find a way to clone the parameter inside the component so that when I change stuff to it, the original array that was passed doesn't change, muddying the scope.


Here's my example. The issue that I'd like to change elements in the items array in the component without touching the states array in the model.


The component:



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('items.@each.checked')
});


And the template:



<div class="multi-selector">
{{#each item in items}}
<div class="checkbox">
<label>
{{input type="checkbox" checked=item.checked}}
{{item.title}}
</label>
</div>
{{/each}}
</div>


The way I call it:



{{multi-selector
items=model.states
updateAction='selectStatesFromMultiSelector'
}}




Aucun commentaire:

Enregistrer un commentaire