I'm trying to use data-attribute initialization to bind the dataSource for an autoComplete input to my viewModel (a Kendo observable)
First off, the viewModel is:
...
this.viewModel = kendo.observable({
...
address: null,
lookupAddress: function() { ... }
...
});
And is bound during class/object initialization:
kendo.bind($("#add-location-subview"), this.viewModel, kendo.mobile.ui);
My HTML is:
<input id="address-field"
data-role="autocomplete"
data-filter="startswith"
data-bind="value: address, events: {change: lookupAddress}"
/>
And, indeed, the address property and lookupAddress event are correctly bound
When I add the data-source in the markup, the autocomplete works correctly:
<input id="address-field"
data-role="autocomplete"
data-source="{data:[ 'item1','item2'','item3','item4','aaa','bbb','ccc']}"
data-filter="startswith"
data-bind="value: address, events: {change: lookupAddress}"
/>
When I try and move the datasource to my model, the autocomplete does not work.
new script:
this.viewModel = kendo.observable({
...
address: null,
theList: new kendo.data.DataSource({
data:[ 'item1','item2'','item3','item4','aaa','bbb','ccc']
}),
lookupAddress: function() { ... }
...
});
new HTML:
<input id="address-field"
data-role="autocomplete"
data-source="theList"
data-filter="startswith"
data-bind="value: address, events: {change: lookupAddress}"
/>
The docs show examples which indicate that this is the correct syntax. What am I missing here? Also, what is the difference between using data-source="..." and data-bind="source: ..." ?
Thanks.
First off, the viewModel is:
...
this.viewModel = kendo.observable({
...
address: null,
lookupAddress: function() { ... }
...
});
And is bound during class/object initialization:
kendo.bind($("#add-location-subview"), this.viewModel, kendo.mobile.ui);
My HTML is:
<input id="address-field"
data-role="autocomplete"
data-filter="startswith"
data-bind="value: address, events: {change: lookupAddress}"
/>
And, indeed, the address property and lookupAddress event are correctly bound
When I add the data-source in the markup, the autocomplete works correctly:
<input id="address-field"
data-role="autocomplete"
data-source="{data:[ 'item1','item2'','item3','item4','aaa','bbb','ccc']}"
data-filter="startswith"
data-bind="value: address, events: {change: lookupAddress}"
/>
When I try and move the datasource to my model, the autocomplete does not work.
new script:
this.viewModel = kendo.observable({
...
address: null,
theList: new kendo.data.DataSource({
data:[ 'item1','item2'','item3','item4','aaa','bbb','ccc']
}),
lookupAddress: function() { ... }
...
});
new HTML:
<input id="address-field"
data-role="autocomplete"
data-source="theList"
data-filter="startswith"
data-bind="value: address, events: {change: lookupAddress}"
/>
The docs show examples which indicate that this is the correct syntax. What am I missing here? Also, what is the difference between using data-source="..." and data-bind="source: ..." ?
Thanks.