Knockout.js KnockoutJS foreach在远程加载的模式对话框中不工作

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

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

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

这很好，我正在将会话id打印到模式中，这样我就知道信息在那里，模型在firebug中显示。但是，我有下面的函数来进行ajax调用，并将响应读入ObservalArray 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);
    }
});
}

函数uploadSubmit（）{
$.ajax({
url:“/Upload/UserSaveFileInfo/”，
键入：“post”，
async:false，
数据：ko.toJSON({
UploadName:$（“#UploadName”）.val（），
UploadDescription:$（“#UploadDescription”）.val（），
Id:$（'#uploadId'）.val（）
}),
contentType:'应用程序/json'，
成功：功能（结果）{
对于（变量i=0；i

以下是我的模式中不想工作的部分：

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

纵队

任何帮助都将不胜感激！！这里有一个小问题：由于模式的远程加载，它与上面描述的略有不同，但我或多或少复制了正在发生的事情

---

编辑：特别是，对moveToModal的ajax调用似乎是导致它爆炸的原因。此fiddle具有与ajax调用不同的功能，它的工作原理与我预期的一样：。因此，ajax调用肯定特别有问题。

我认为您不需要在foreach中的每个属性之前放置“$data.”

编辑

我让它在JSFIDLE工作

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

编辑2

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

我还将您在ajax调用中插入的html放在html中。我使用了一个knockout if绑定来包围它，这样您就不会因为不存在的属性而得到错误

---

我已经尝试了两种方法，但仍然不起作用。。。我认为foreach可以使用它，也可以不使用它，我只是习惯于处理儿童收藏，所以我养成了使用它的习惯……好吧……我认为这不应该是个问题，但是你有没有试过在foreach行中将“modalModel.RetCols”改为“modalModel.RetCols（）”？我想你误解了这个问题，如果我不清楚，我道歉。我有两个独立的视图模型，一个存在于父页面上，一个是在打开ajax加载的模式窗口时创建的。modalModel用于加载iframe的数据。我会拉小提琴，但因为它有一个外部的iframe，所以有点棘手。。。modalModel只针对iframe内容，这就是为什么我在ajax加载完iframe内容后应用该模型。。。我试着弄把小提琴，但我得想个办法以一种不连贯的方式来做。如果没有看到小提琴，每一次回音都不起作用，我理解整个情况有点困难。希望你能举一个简单的例子。关于foreach，我将“modalModel.RectCols”改为“RectCols”。由于绑定的是modalModel，因此可以直接引用该属性。当然，可能还有另一个问题与整个页面有关，这可能会阻止它工作，就像在小提琴中一样。哇！那很有趣：）。具体来说，ajax似乎有点问题，因为在修补这个小把戏的同时，让ajax调用之外的函数实现了我所期望的。但是在ajax调用中，它不起作用，或者有时它可能会让我看到它的存在。关于这一点的另一个有趣的观察是，如果我重新启动模态，框就在那里。我以前没有注意到这一点，因为我的开发版本有一系列的div，它们在工作时显示/隐藏。。。这是小提琴：

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

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

ko.applyBindings(modalModel);