Question

我正在使用twitter bootstrap，mvc和knockout。我有一个模态，我从远程网址打开，指向一个处理上传的页面。

我这样做是这样的：

<a class="btn btn-mini" data-toggle="modal"  data-bind="attr: { href: modalHref }" data-target="#UploadModal" >Uploads</a>


<div id="UploadModal" class="modal hide" style="display: none; " aria-hidden="true">
<div class="modal-header">
    <button data-dismiss="modal" class="close" type="button">×</button>
    <h3>Upload</h3>
</div>
<div class="modal-body form-horizontal" style="padding:0;">
</div>
<div class="modal-footer">
    <a data-dismiss="modal" class="btn" href="#" data-bind="click: saveCount">Save</a>
</div>
</div>

模态加载很好，内部的一切都很好。基本上我有一个fileuploader控件，用户将文件发布给我，我处理它，然后我返回列标题来处理它们。这是我在表单上的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) {
        $("#uploader").hide();
        for( var i = 0; i < result.length; i++)
        {
            viewModel.RetRows.push({
                Id: ko.observable(result[i].Id),
                Header: ko.observable(result[i].Header),
                MatchedTo: ko.observable(result[i].MatchedTo),
                Values: ko.observable(result[i].Values),
                ColumnNumber: ko.observable(result[i].ColumnNumber)
            });
        }
        $("#matcher").show();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(data);
        alert(textStatus);
    }
});

}

这一切都有效，但在我的远程加载模式中我有一些代码，我试图从返回的数据渲染一系列文本框/跨度但它不起作用。我试着只看模态中的其他ko变量并且它们没有显示出来，所以似乎模态不知道敲击存在或者敲除无法访问模态内容......有没有办法使远程模态和ko同步？

<!-- ko foreach: RetRows -->
        <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.value"></span>
            </div>
        </div>
    <!-- /ko -->

我把它放在父页面中，一切都显示出来了。因此，这似乎是模式中远程加载内容的一个问题。有想法该怎么解决这个吗？也许有一种方法可以通过bindingHandler附加远程内容？感谢任何人都能提供的任何见解。

Answer 1

您需要将绑定应用于该模态。

ko.applyBindings(viewModel, document.getElementById("remote_modal"));

无法在远程Twiitter Bootstrap模式中使用knockout

1 个答案: