MVC 4 View Knockout Bindings在ajax调用时没有更新

Question

我已经通过了尽可能多的问题在这里，我可以找到并尝试了所有不同的建议，但不能得到这个工作。我有一个使用映射插件与Knockout绑定的视图，它可以正常工作，但只有当我做"错误的事情"时。我所读到的一切都说你应该每个视图只调用一次ko.applyBindings()，然后一切都应该使用ko.mapping.fromJS()进行更新。我似乎无法让这工作，我已经能够让我的视图刷新的唯一方法是再次调用ko.applyBindings()成功回调从我的.ajax()调用。下面是有问题的代码。

<script type="text/javascript">
    var viewModel;
    $(document).ready(function() {
        $("#panelbar").kendoPanelBar({
            expandMode: "multiple"
        });
        $.ajax({
            type: 'GET',
            url: '/Home/IsUserMarketingManager',
            success: function (data) {
                if (data == true) {
                    $('#submitNewCase').hide();
                    $('#approveCase').show();
                    $('#disapproveCase').show();
                }
            }
        });
        // Generate client View Model from Server View Model
        viewModel = new ViewModel();
        ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)),{}, viewModel);
        ko.applyBindings(viewModel);
    });
    function ViewModel () {
        var self = this;
        self.addLocation = function() {
            self.AdditionalLocations.push({ GaNumber: "" });
        };
    }
</script>

然后用检索到的数据更新表单:

<script type="text/javascript">
    $('#btnImport').click(function () {
    $.blockUI({ message: '<h2>Importing Client Information...</h2> <img src="/Images/ajax-loader.gif"><br />' });
    $.ajax({
        type: 'post',
        url: '/Home/ImportClientCrmInfoJson',
        dataType: "json",
        data: ko.mapping.toJS(viewModel),
        success: function (data) {
            $.unblockUI();
            if (!data.AccountNull) {
                ko.mapping.fromJS(data, {}, viewModel);
            } else {
                alert("Could not find account for this GA Number, please try again.");
            }
        }
    });
});
</script>

当提交表单到我的控制器时，所有的数据都在那里，并正确地映射到我的服务器端视图模型，但是视图中的表单没有更新从$返回的数据。ajax调用。如果我这样做，我已经得到了表单更新，但我知道这不是正确的方式，也给我带来了其他问题。

 <script type="text/javascript">
    $('#btnImport').click(function () {
    $.blockUI({ message: '<h2>Importing Client Information...</h2> <img src="/Images/ajax-loader.gif"><br />' });
    $.ajax({
        type: 'post',
        url: '/Home/ImportClientCrmInfoJson',
        dataType: "json",
        data: ko.mapping.toJS(viewModel),
        success: function (data) {
            $.unblockUI();
            if (!data.AccountNull) {
                viewModel = ko.mapping.fromJS(data);
                                ko.applyBindings(viewModel); // This works but isn't the right way...
            } else {
                alert("Could not find account for this GA Number, please try again.");
            }
        }
    });
});
</script>

Answer 1

您是否检查过下面这行代码似乎创建了一个'NEW'视图模型?

viewModel = ko.mapping.fromJS(data);

当你这样做时，新的viewModel和旧的绑定将被销毁。这就是为什么你必须再次调用ApplyBindings。无论如何，我认为上面的代码行是问题的根源。

是否有一种方法可以让你在viewModel上创建一个可观察属性，并允许viewModel反映这个对象中的数据?这可能是更新过程中更实用的方法。

Answer 2

在ajax调用的成功回调中，使用此方法ko.applyBindings(viewModel)，但将要更新的DOM部分作为第二个参数传递，如下所示

ko.applyBindings(viewModel, $("#mydiv")[0])

不要使用jquery对象，而是使用REAL DOM对象