autocomplete data binding using data attribute initialization

[Robert]

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.

[Alexander Valchev]

Hello Robert,

Thank you for getting in touch with us.
The problem is related to the syntax used. The difference between data-source and data-bind="source: is that the first one is configuration option written via data-attribute, while the second is source binding.

data-source="theList" will search for global variable called theList which should reference to a DataSource instance.

data-bind="source: theList" will search for MVVM field which contains DataSource instance.

To illustrate this I prepared a small sample: http://jsbin.com/orapaq/2/edit

In your particular case you should use data-bind="source: theList" because "theList" is part of the ViewModel. For more information please check the source binding article:

• http://docs.kendoui.com/getting-started/framework/mvvm/bindings/source
  
  

Regards,
Alexander Valchev
Telerik