Question

我正在尝试使用MVC Controller中的JsonResult进行简单绑定。 json回来但是knockout observable数组中的绑定确实有效。以下是我的代码。

如果我将json结果直接放到observable它可以工作。我不确定我在这里缺少什么。

淘汰赛代码

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-min.js"></script>
<script src="~/Scripts/knockout.mapping.js"></script>

var viewModel;
vmListModel = function () {
    var self = this;

    self.Products = ko.observableArray([]);

    self.GetData = function () {
        $.ajax({
            url: '@Url.Action("product", "employees")',
            cache: false,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (rs) {
                console.log(rs);  //--> the data returns like this { Id: '1001', Name: 'xavier' }
                //self.Products({ Id: '1001', Name: 'xavier' });  // if I put this it binds
                ko.mapping.fromJS(rs, {}, self.Products);
                //self.Products(ko.mapping.fromJS(rs));
            }
        });
    }


};


$(document).ready(function () {
    viewModel = new vmListModel();
    ko.applyBindings(viewModel, $('#products1')[0]);
    viewModel.GetData();
});

HTML

<table id="products1">
<thead>
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
    </tr>
</thead>
<tbody data-bind="foreach:Products">
    <tr>
        <td data-bind="text:Id">
        </td>
        <td data-bind="text:Name">
        </td>
        <td>
        </td>
    </tr>
</tbody>

控制器代码

  public JsonResult Product()
    {
        string variablename = "{Id:'1001',Name:'xavier'}";
        return Json(variablename, JsonRequestBehavior.AllowGet);
    }

错误

未捕获的ReferenceError：无法处理绑定“text：function（）{return Id}” 消息：Id未定义

Answer 1

您正在从控制器传递string类型的数据并尝试使用mapping插件进行转换，这种插件在各种类型中都是错误的

FIX：构建一个数组并传递它。因此，映射插件会将所有内容转换为可观察的内容，并且您可以保持成功的双向绑定。

控制器：

var data = new[] { new { Id = "1001", Name = "Nancy" }, new { Id = "1002", Name = "bunny" } };
return Json(data, JsonRequestBehavior.AllowGet);

希望有所帮助

MVC Controller返回JSON但没有在Knockout

1 个答案: