autocomplete data binding using data attribute initialization

2 posts, 0 answers
  1. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 03 Jul 2013 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Jul 2013 Link to this post

    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:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top