0

リモートモーダルダイアログがあり、ロードされると、モーダルに関するいくつかの情報を含む新しいモデルが作成されます。

var modalModel = {
    SessionId: viewModel.SessionId(),
    RetCols: ko.observableArray([])
};

$('#UploadModal').ajaxComplete(function (event, request, settings) {
    ko.applyBindings(modalModel, $('#zupload')[0]);
});

これはうまくいきます。セッションIDをモーダルに出力しているので、情報があり、モデルがfirebugに表示されていることがわかります。ただし、ajax 呼び出しを行い、応答を observableArray RetCols に読み込む次の関数があります。これは、ページに長さを印刷していて、アイテムがあることを示しているため、機能しているように見えますが、私の人生ではそれをforeachすることはできません。ここに何か問題がありますか？ajax 呼び出しは次のとおりです。

function uploadSubmit() {
$.ajax({
    url: '/Upload/UserSaveFileInfo/',
    type: 'post',
    async: false,
    data: ko.toJSON({
        UploadName: $("#uploadName").val(),
        UploadDescription: $("#uploadDescription").val(),
        Id:  $('#uploadId').val()
    }),
    contentType: 'application/json',
    success: function (result) {
        for (var i = 0; i < result.length; i++)
        {
            modalModel.RetCols.push({
                Id: result[i].Id,
                Header: result[i].Header,
                Values: result[i].Values,
                MatchedTo: result[i].MatchedTo,
                ColumnNumber: result[i].ColumnNumber
            });
        }
        alert(modalModel.RetCols().length);  
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(data);
    }
});
}

そして、ここに動作したくない私のモーダルのビットがあります:

<span data-bind="text: modalModel.RetCols().length"></span>  <!-- this works! --> 


<!-- ko foreach: modalModel.RetCols -->
        <div class="control-group" >
            <label class="control-label">
                Column <span data-bind="text: $data.ColumnNumber"></span>
            </label>
            <div class="controls">
                <input data-bind="value: $data.MatchedTo" />
                <span class="help-block" data-bind="text: $data.Values"></span>
            </div>
        </div>
<!-- /ko -->

どんな助けでも大歓迎です!! ここにフィドルがあります：http://jsfiddle.net/ZLBpu/154/モーダルのリモートロードのため、上記の説明とは少し異なりますが、起こっていることを多かれ少なかれ複製しました。

編集:特に、moveToModal の ajax 呼び出しが、これを爆破させているようです。このフィドルには ajax 呼び出しではなく同じ機能があり、期待どおりに動作します: http://jsfiddle.net/valvemail/RJ8Vx/1/ 。したがって、特に ajax 呼び出しに何か問題があるはずです。

4

1 に答える 1

0

「$data」を入れる必要はないと思います。foreach 内の各プロパティの前。

編集

jsFiddleリンクで動作するようにしました

この HTML の使用:

<span data-bind="text: RetCols().length"></span>  <!-- this works! --> 

<!-- ko foreach: RetCols -->
    <div class="control-group" >
        <label class="control-label">
            Column <span data-bind="text: $data.ColumnNumber"></span>
        </label>
        <div class="controls">
            <input data-bind="value: $data.MatchedTo" />
            <span class="help-block" data-bind="text: $data.Values"></span>
        </div>
    </div>
<!-- /ko -->

そして、このJS：

var modalModel = {
    SessionId: 'a',
    RetCols: ko.observableArray([])
};

modalModel.RetCols.push({
    ColumnNumber: 1,
    MatchedTo: "mt",
    Values: "values"
});

ko.applyBindings(modalModel);

編集 2

私はあなたのフィドルを見ました。問題は、modalModel をバインドしようとしている html に viewModel が既にバインドされていることだと思います。これを回避するために、コードを少し再構築して modalModel を viewModel の一部にしました。次に、モーダルを「バインド」するように切り替えることができる boolean observable を modalModel に配置します。

また、挿入していたhtmlをhtmlのajax呼び出しに入れました。存在しないプロパティでエラーが発生しないように、バインドする場合はノックアウトで囲みました。

ここにフィドルがあります

于 2013-04-18T23:57:49.697 に答える