Я использую twitter bootstrap, mvc и нокаут. У меня модальный, который я открываю из удаленного URL-адреса, который указывает на страницу, которая связана с загрузками.Невозможно использовать нокаут в удаленной загрузке Twiitter Modal
Я делаю это так:
<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>
модальные нагрузки штраф и все, внутри он прекрасно работает. В основном у меня есть элемент управления файловым загрузчиком, где пользователь отправляет мне файл, обрабатываю его, а затем возвращаю заголовки столбцов для их обработки. Вот моя Аякса функция на форме:
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 внутри модального, и они не отображаются, поэтому кажется, что модальный не имеет понятия, что нокаут существует, или нокаут не имеет доступа к модальному контенту ... Есть ли способ чтобы сделать удаленный modal и ko sync up?
<!-- 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 -->
Я положил это на родительскую страницу, и все появилось. Таким образом, это, по-видимому, проблема с удаленно загруженным контентом в модальном режиме. Есть какие нибудь идеи как это починить? Возможно, есть способ, которым я могу подключить удаленный контент через bindHandler? Спасибо за любое понимание, которое любой может предоставить.
Хорошо, после того, как это сделать:. $ ('# UploadModal') ajaxComplete (функция (событие, запрос, параметры) { ko.applyBindings (ViewModel, document.getElementById ("myUploads")); }); Я получаю странное поведение. Я печатаю переменную в модальном коде, чтобы убедиться, что у меня есть доступ к модели, но теперь, после этого, модель не используется из остальной части страницы. то есть у меня есть элементы управления, которые исчезают .... я, кажется, делаю что-то неправильно здесь. когда/где следует повторно применить модель к удаленному модальному? – zach
Да, попробуйте просто 'ko.applyBindings (viewModel)' в той же области. Удалите другие applyBindings, которые я предложил ранее. – Joe
Он все еще делает это с этим ... однако, я создал новую модель и применил ее к div, и, похоже, она работает нормально: var modalModel = { SessionId: viewModel.SessionId(), RetCols: ko.observableArray ([]) }; $ ('# UploadModal'). AjaxComplete (функция (событие, запрос, настройки) { ko.applyBindings (modalModel, document.getElementById ("zupload")); }); – zach