3

我已经在这里找到了尽可能多的问题，并尝试了所有不同的建议，但无法让它发挥作用。我有一个使用映射插件与 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>

将表单提交到我的控制器时，所有数据都在那里并正确映射到我的服务器端视图模型，但是视图中的表单没有使用从 $.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>

任何帮助将非常感激。

4

2 回答 2

0

您是否检查过以下代码行似乎创建了一个“新”视图模型？ 

viewModel = ko.mapping.fromJS(data);

当你这样做时，新的 viewModel 旧的绑定被破坏了。这就是您必须再次调用 ApplyBindings 的原因。无论如何，我认为上面这行代码是问题的根源。

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

于 2013-05-29T14:48:12.320 回答
0

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

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

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

于 2013-08-29T14:28:02.440 回答