Question

我有一个远程模态对话框，一旦加载，就会为模态创建一个带有几位信息的新模型：

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

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

这很好用，我将会话ID打印到模态，所以我知道信息在那里，模型在firebug中显示。但是，我有以下函数进行ajax调用并将响应读入observableArray RetCols。这个APPEARS正在工作，因为我在页面上打印长度，它显示它有项目，但我不能为我的生活预见它。这里有什么不对的我没有看到吗？这是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

我认为你不需要输入数据。＆＃34;在foreach内部的每个属性之前。

修改

我让它在jsFiddle link
中工作
使用此HTML：

<span data-bind="text: RetCols().length"></span>   <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> 

这个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的一部分。然后我在modalModel上放置boolean observable，你可以切换到＆＃34; bind＆＃34;模态。

我还把你插入的html放在html中的ajax调用中。如果绑定我用一个淘汰赛包围它，这样你就不会因为不存在的属性而出错。

Here is the fiddle

KnockoutJS foreach不在远程加载的模态对话框中工作

1 个答案: