conmponent property issue
{
"version": "0.10.6",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "1.12.2",
"ember-data": "2.9.0",
"ember-template-compiler": "1.12.2",
"ember-testing": "1.12.2"
},
"addons": {}
}
{{input type='checkbox' checked=isPrimary}} {{item.name}}
<h1>Welcome to {{appName}}</h1>
<br>
<button {{action 'setPrimary'}}>Set Primary</button>
<button {{action 'resetPrimary'}}>Reset Primary</button>
<hr>
{{#each arr as |item|}}
{{my-comp item=item}}
{{/each}}
<br>
{{outlet}}
<br>
<br>
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.primary-name {
background: red;
}
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
arr: [{name:'gokul'},
{name:'gokul1'},
{name:'gokul2'},
{name:'gokul3'},
{name:'gokul4'},
{name:'gokul5'}],
actions: {
setPrimary() {
let arr = this.get('arr')[5];
console.log(this.get('arr')[5]);
Ember.set(arr, 'primary', true);
console.log(this.get('arr')[5]);
},
resetPrimary() {
let arr = this.get('arr')[5];
console.log(this.get('arr')[5]);
Ember.set(arr, 'primary', false);
console.log(this.get('arr')[5]);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNameBindings: ['isPrimary:primary-name'],
isPrimary: Ember.computed('item.primary', {
get() {
return this.get('item.primary')
},
set(key, value) {
this.set('item.primary', true);
return value;
}
})
});