This is a migrated thread and some comments may be shown as answers.

data binding to model

1 Answer 143 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Maxim
Top achievements
Rank 1
Maxim asked on 26 Nov 2012, 04:40 PM
Hi,

Is there a way to data bind selected value to model. I have try to use this, data, and self but it does not work. What does work is creating a nested object and binding it to a user selection.

Below is what I am trying to do but it does not work:
<div id="data-view" data-bind="source: this" data-template="data-view-template">
</div>
<script type="text/html" id="data-view-template">
    <div>
        <input id="search" data-role="autocomplete" data-bind="source: ds, value: this" data-text-field="Name" />
        <div data-bind="text: Value"></div>
    </div>
</script>
$(function () {
    var values = [{ Name: "Foo + Bar", Value: 1 }, { Name: "Foo - Bar", Value: 2 }, { Name: "Foo * Bar", Value: 3 }];
    var model = kendo.observable({
        Name: "???",
        Value: "???",
        ds:  values
    });
    kendo.bind($("#data-view"), model);
});
Below is what I can do but feels funny:
<script type="text/html" id="data-view-template">
    <div>
        <input id="search" data-role="autocomplete" data-bind="source: ds, value: Person" data-text-field="Name" />
        <div data-bind="text: Person.Value"></div>
    </div>
</script>
var model = kendo.observable({
    Person: {
        Name: "???",
        Value: "???",
    },
    ds:  values
});
Thanks,
Max

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Nov 2012, 01:41 PM
Hello Maxim,

It is not possible to bind the value to "this" keyword, because it refers to the View-Model itself.
The AutoComplete value can be bound to a string or object property. Please check the following examples:
<input id="search" data-role="autocomplete" data-bind="source: ds, value: Value" data-text-field="Name" />
 
var model = kendo.observable({
    Name: "???",
    Value: "???", //or Value: null,
    ds:  values
});
kendo.bind($("#data-view"), model);

When the value is bound to a string field it will be updated with the value of the AutoComplete's data-text-field. In the value of the widget is bound to object it will be updated with the selected dataItem.
//case one
model.Value: "Foo - Bar"
//case two
model.Value: { Name: "Foo - Bar", Value: 2 }

I hope this information will help.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Templates
Asked by
Maxim
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or