剑道 MVVM Jquery AJAX答案

【问题标题】：Kendo MVVM Jquery AJAX剑道 MVVM Jquery AJAX
【发布时间】：2023-03-05 03:57:01
【问题描述】：

很抱歉，如果之前有人问过这个问题，但我为 Kendo 找到的每个 ajax 示例都与网格有关。我是 Kendo 的新手，正在尝试对我的控制器中的一种方法进行基本的 ajax 调用，但我似乎无法用数据填充跨度。 “名称”显示在我的警报中，因此我知道数据在那里......但不在我的视图中。

        var viewModel = kendo.observable({
            Text: "SomeText"        
        });
        $.ajax({
            url: "/Home/GetPerson",
            dataType: "json",
            type: "POST",
            success: function (data) {
                $.extend(viewModel, data);
                alert(data.Name) //displays correctly.

            }
        })

        kendo.bind(document.body, viewModel);

在我看来，我有这个：

<span data-bind="text: Name"></span>

任何帮助将不胜感激......如果有更好的方法来实现这一点，我会提出想法。

编辑

好的——我可以通过稍微修改代码来让它工作，但它看起来很笨重。有没有更清洁的方法？

       var viewModel = kendo.observable({
            AjaxData: null        
        });
        $.ajax({
            url: "/Home/GetPerson",
            dataType: "json",
            type: "POST",
            success: function (data) {
                viewModel.set("AjaxData", data);
                alert(data.Name) //displays correctly.

            }
        })

        kendo.bind(document.body, viewModel);

查看：

<span data-bind="text: AjaxData.Name"></span>

【问题讨论】：

标签： javascript kendo-ui

【解决方案1】：

将您的 kendo.bind 函数放在 Ajax 调用之前。

我对此进行了测试，它可以工作：

$(document.body).html('<span data-bind="text: Text"></span>');
var viewModel = kendo.observable({Text: "test 1"});
kendo.bind(document.body, viewModel);
alert("The text now is " + viewModel.Text);
$.ajax({
  url: "/Home/GetPerson",
  dataType: "json",
  type: "POST",
  success: function (data) {
    for ( var n in data ){
      viewModel.set(n, data[n]);
    }
    alert("The text now is " + viewModel.Text);
  }
});

【讨论】：