Question

我在这里经历了尽可能多的问题，因为我能找到并尝试了所有不同的建议而无法使其发挥作用。我有一个使用映射插件与Knockout绑定的视图，它工作正常，但只有当我做“错误的事情”时。我读过的所有内容都表明你应该只对每个视图调用ko.applyBindings（），然后所有内容都应该使用ko.mapping.fromJS（）进行更新。我似乎无法让这个工作，我能够让我的视图刷新的唯一方法是在我的.ajax（）调用成功回调中再次调用ko.applyBindings（）。这是违规代码。

<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>

将表单提交给我的控制器时，所有数据都存在并正确映射到我的服务器端View Model，但视图中的表单不会使用$ .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

您是否检查过以下代码行是否会创建“新”视图模型？

viewModel = ko.mapping.fromJS(data);

执行此操作时，新的viewModel将销毁旧的绑定。这就是你必须再次调用ApplyBindings的原因。无论如何，我认为上面的代码行是问题的根源。

有没有办法在viewModel上创建一个observable属性，并允许viewModel反映此对象中的数据？这可能是更实际的更新过程。

Answer 2

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

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

不要使用jquery对象，而应使用REAL DOM对象。

MVC 4查看Knockout绑定未在ajax调用上更新

2 个答案: