Hi there,
I’m trying to make a small example with two way data binding.
I have a main app with two combo box:
Combo 1: nokia,siemens
Combo 2: the years from the selected value from combo1
[
{
id: 1,
name: nokia,
years: [{value:2016, text: “2016”}]
},{
id: 2,
name: siemens,
years: [{value:2017, text: “2017”}]
}
]
the form load fine, but i have no behavior, this means, when the value in the combo 1 is changed combo 2 don’t change its values.
var Component = require(“can-component”);
var DefineMap = require(“can-define/map/”);
var view = require("./jw-select-year.stache");
var LabelValue = require("~/models/label-value");
var SelectListVM = DefineMap.extend({
values: LabelValue.List,
selectedValue : LabelValue,
set value(value) {
return value;
}
});
module.exports = Component.extend({
tag: “jw-select-year”,
view: view,
ViewModel: SelectListVM
});
var Component = require(“can-component”);
var DefineMap = require(“can-define/map/”);
var view = require("./jw-select-comp.stache");
var CompUser = require("~/models/comp-user");
var SelectListVM = DefineMap.extend({
values: CompUser.List,
selectedValue : CompUser,
set value(value) {
return value;
}
});
module.exports = Component.extend({
tag: “jw-select-comp”,
view: view,
ViewModel: SelectListVM
});
index.stache
<jw-select-comp {(values)}="compList" />
<jw-select-year {(values)}="selectedComp.years"/>
jw-select-year.stache
<select {($value)}="value">
{{#each values}}
<option {($value)}={{value}}>{{text}}</option>
{{/each}}
</select>
jw-select-comp.stache
<select {($value)}="value">
{{#each values}}
<option {($value)}={{id}}>{{name}}</option>
{{/each}}
</select>