Knockout JS foreach 在远程加载的模式对话框中不起作用

Question

我有一个远程模态对话框，一旦加载，它就会创建一个新模型，其中包含一些模态信息：

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

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

这很好用，我正在将会话 ID 打印到模态，所以我知道信息在那里并且模型正在萤火虫中显示。但是，我有以下函数可以进行 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 调用肯定有问题。

Answer 1

我认为您不需要输入“$data”。在 foreach 内的每个属性之前。

编辑

我让它在 jsFiddle link 中工作

使用此 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

我看了看你的小提琴。我认为问题在于 viewModel 已经绑定到您尝试绑定 modalModel 的 html。为了解决这个问题，我稍微重构了代码，使 modalModel 成为 viewModel 的一部分。然后我将 boolean observable 放在 modalModel 上，您可以切换到“绑定”模态。

我还将您插入的 html 放在 html 中的 ajax 调用中。我用一个敲除 if 绑定包围它，这样你就不应该因为不存在的属性而出错。

Here is the fiddle