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

Question

我在组合两个 kendo 想法时遇到了问题，我找到了各自的例子，但目前还没有组合的例子。

我有一个包含简单 HTML 元素（文本框、下拉列表等）的页面。我已经使用这个 kendo 示例来 link 视图模型。

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

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

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

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

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

我见过很多将数据源绑定到 kendo 网格、下拉列表等的示例。我不知道如何将从我的数据源返回的数据绑定到我的页面的元素。

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

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

Answer 1

在你的第一个 link 到 kendo dojo 中，我在 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，单击按钮，您将看到数据从（文本值更新为新文本值）

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

Kendo UI: Can I use a DataSource to sync data with standard HTML elements

c#

jquery

kendo-ui

kendo-mvvm