3

ここで見つけられる限り多くの質問をして、さまざまな提案をすべて試しましたが、これを機能させることができません。マッピング プラグインを使用して Knockout にバインドされたビューがあり、問題なく動作しますが、「間違ったこと」を行った場合のみです。私が読んだことはすべて、ビューごとに ko.applyBindings() への呼び出しを 1 回だけ行う必要があり、その後、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

ajax 呼び出しの成功コールバックでは、このメソッドを使用しますko.applyBindings(viewModel)が、次のように更新する DOM 部分を 2 番目のパラメーターとして渡します。

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

jquery オブジェクトではなく、REAL DOM オブジェクトを使用してください。

于 2013-08-29T14:28:02.440 に答える