Kendo UI：我可以使用 DataSource 将数据与标准 HTML 元素同步吗

Question

我在组合两个剑道理念时遇到了麻烦，我已经找到了单独的示例，但目前还没有组合示例。

我有一个包含简单 HTML 元素（文本框、下拉菜单等）的页面。我已经使用这个剑道示例将视图链接到视图模型。

http://demos.telerik.com/kendo-ui/mvvm/elements

这里一切正常。我可以更新视图、更改值并查看视图模型中反映的所有内容。

我有一个负责此数据的远程服务。我按照这个剑道示例为这个遥控器创建了一个数据源。

http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage

我定义了一个读取和更新传输（因为这些是我唯一需要的），并且我为数据定义了一个模式，并具有有效的 id。所有这些也都有效。当我手动调用 read 时，DataSource 向服务发出读取请求，并返回数据。

我已经看到很多将数据源绑定到剑道网格、下拉菜单等的示例。我不知道如何将数据源返回的数据绑定到页面中的元素。

我什至无法通过使用 Chrome 开发工具进行探索来破解某些东西，但最终我想要的不仅仅是破解。我希望，无论解决方案是什么，它都能适用于我正在开发的整个网站。

最好的方法是什么？我觉得我误解了这应该如何工作。

Answer 1

在您第一个指向剑道道场的链接上，在 viewModel 内，我创建了一个包含 ajax 调用的函数，以从后端检索值

getData: function () {
$.ajax({
    url: "http://demos.telerik.com/kendo-ui/service/Products", //replace this with your url to get the data from backend
    type: "GET",
    dataType: "jsonp" // replace this with the type suit your need maybe json or etc (just use this as example to fire the success event

}).success(function (data) {
    //asumme this dummy data is the data coming from backend
    var dummyData = {
        textValue: "new Text value",
        textareaValue: "new Textarea value",
        checkboxValue: true,
        radioValue: "new Apple",
        checkboxListValue: ["Banana"],
        multipleSelectValue: ["Banana"],
        fruits: ["Apple", "Banana", "Orange"],
        selectValue: "Orange"
    };
    //set the viewModel value with the data coming from backend
    viewModel.set("textValue", dummyData.textValue);
    viewModel.set("textareaValue", dummyData.textareaValue);
    viewModel.set("checkboxValue", dummyData.checkboxValue);
    viewModel.set("radioValue", dummyData.radioValue);
    viewModel.set("checkboxListValue", dummyData.checkboxListValue);
    viewModel.set("multipleSelectValue", dummyData.multipleSelectValue);
    viewModel.set("selectValue", dummyData.selectValue);

    //after you set the value, because the viewModel already bind with the component/value of the kendo widget on the HTML side the textbox/dropdown/checkbox will automatically updated
});

}

我还在html上创建了一个按钮来触发getData函数

<tr>
    <td><span data-role="button" data-bind="events:{click:getData}" />
         <h4>Click this to do ajax call </h4>
    </td>
</tr>

看到这个dojo，点击按钮，你会看到数据从（文本值到新文本值）更新