Question

我正在使用Mvc4 / bootstrap 3.2和knockout 3.2。问题我有一个表格有一个。文本框和按钮，单击按钮我将文本框值传递给控制器。从控制器绑定viewModel与表接收数据后。但是，表中也没有更新数据，也没有更新mvc模型。我在提交数据时已经检查过了。

ViewModel：我以两种方式尝试过ViewMoel

var SibviewModel=null;
    $(function () {
        var model = @Html.Raw(Json.Encode(Model));
        SibviewModel = ko.mapping.fromJS(model);
        ko.applyBindings(SibviewModel);
    });

function GetMatchingSibling(_Id) {
        var url = "/Home/GetStudentSiblingDetails/?Id=" + _Id;
        $("#myModal").modal('show');
        $.ajax({
            url: url,
            cache: false,
            type: "GET",
            success: function (data) {
                try {
                    $(data.data).each(function (index, element) {
                        SibviewModel.SibviewModel.push(element);
                    });
                    ko.applyBindings(viewModel);

                } catch (e) {
                    $(".alert-dismissable")
                    .alert('show')
                    .addClass("alert-danger")
                    .append("<h3>"+e+"</h3>");

                }
                finally {
                    $("#myModal").modal('hide');
                }


            },
            error: function (reponse) {
                alert("error : " + data.error);
                $("#myModal").modal('hide');
            }
        });
    }

然后我写了MVC Razor视图

<tbody data-bind="foreach: lookupCollection">
            @foreach (var item in Model.LinkedSiblings)
            {
                string dobval = "";
                if (Model.DOB.HasValue)
                {
                    dobval = Model.DOB.Value.ToString("dd-MM-yyyy");
                }

                @Html.HiddenFor(x => item.PhoneNo, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].PhoneNo", @Value = item.PhoneNo, data_bind = "value: PhoneNo" })
                @Html.HiddenFor(x => item.Email, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].Email", @Value = "santokh.hcl@hmail.com", data_bind = "value: Email" })
                @Html.HiddenFor(x => dobval, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].DOB", @Value = dobval, data_bind = "value: DOB" })
                @Html.HiddenFor(x => item.LastName, new { @Name = "LinkedSiblings[" + item.DynamicControlId + "].LastName", @Value = item.LastName, data_bind = "value: LastName" })
                <tr>
                    <td data-bind="text: StudentId">@Html.TextBoxFor(x => item.StudentId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].StudentId", @Value = item.StudentId, data_bind = "value: StudentId" })
                    </td>
                    <td>@Html.TextBoxFor(x => item.AdmissionId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].AdmissionId", @Value = item.AdmissionId, data_bind = "value: AdmissionId" })
                    </td>
                    <td>@Html.TextBoxFor(x => item.FirstName, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].FirstName", @Value = item.FirstName, data_bind = "value: FirstName" })
                    </td>
                    <td>@Html.TextBoxFor(x => item.ClassId, new { style = "max-width:100px;", @Name = "LinkedSiblings[" + item.DynamicControlId + "].ClassId", @Value = item.ClassId, data_bind = "value: ClassId" })
                    </td>
                </tr>

            }
            @Html.EditorFor(x => Model.LinkedSiblings)
        </tbody>
    </table>

在提交表单时，视图不会使用值而不是在控制器方法上接收的值进行更新。

Answer 1

在AJAX回调中调用ko.applyBindings有两个问题：

try {
    $(data.data).each(function (index, element) {
        SibviewModel.SibviewModel.push(element);
    });
    ko.applyBindings(viewModel);
}

第一个问题是您传递的变量viewModel未声明（我无法看到声明）或包含旧数据（您在SibviewModel.SibviewModel更新了数据）

第二个问题是你不应该致电ko.applyBindings。它将在knockout 3.x中抛出一个异常 - 你不能将两个viewModels绑定到同一个元素。它也是对knockout.js和数据绑定的基本概念的误解。如果修改模型，更改会自动传播到视图，您不必调用任何函数... ko.applyBindings仅用于初始化新绑定。这不是你的情况，你有一个现有的绑定，你只想更新模型。

也许可能会有其他错误，我没有检查整个代码......

顺便说一下，您还遇到了性能问题，请查看此文章 - http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

Answer 2

  var viewModel = {
        lookupCollection: ko.observableArray()
    };
    var SibviewModel=null;
    $(function () {
        var model = @Html.Raw(Json.Encode(Model));
        SibviewModel = ko.mapping.fromJS(model);
        ko.applyBindings(SibviewModel);
    });

    function GetMatchingSibling(_Id) {
        var url = "/Home/GetStudentSiblingDetails/?Id=" + _Id;
        $("#myModal").modal('show');
        $.ajax({
            url: url,
            cache: false,
            type: "GET",
            success: function (data) {
                try {
                    $(data.data).each(function (index, element) {
                        SibviewModel.LinkedSiblings.push(element);
                    });
                    ko.applyBindings(LinkedSiblings);

                } catch (e) {
                    $(".alert-dismissable")
                    .alert('open')
                    .removeClass('alert-warning')
                    .addClass("alert-danger")
                    .append("<h3>"+e+"</h3>");   
                }
                finally {
                    $("#myModal").modal('hide');
                }
            },
            error: function (reponse) {
                alert("error : " + data.error);
                $("#myModal").modal('hide');
            }
        });
    }

：Jookyn。我附加了用于更新List的完整JS代码。在Lookup Collection的地方，我一直在桌子上使用“LinkedSiblings”进行foreach循环

ASP.NET MVC Knockout绑定不起作用

2 个答案: