2013-04-18 2 views
1

Я использую 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? Спасибо за любое понимание, которое любой может предоставить.

ответ

1

Вам необходимо применить привязки к этому модалю.

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

Хорошо, после того, как это сделать:. $ ('# UploadModal') ajaxComplete (функция (событие, запрос, параметры) { ko.applyBindings (ViewModel, document.getElementById ("myUploads")); }); Я получаю странное поведение. Я печатаю переменную в модальном коде, чтобы убедиться, что у меня есть доступ к модели, но теперь, после этого, модель не используется из остальной части страницы. то есть у меня есть элементы управления, которые исчезают .... я, кажется, делаю что-то неправильно здесь. когда/где следует повторно применить модель к удаленному модальному? – zach

+0

Да, попробуйте просто 'ko.applyBindings (viewModel)' в той же области. Удалите другие applyBindings, которые я предложил ранее. – Joe

+0

Он все еще делает это с этим ... однако, я создал новую модель и применил ее к div, и, похоже, она работает нормально: var modalModel = { SessionId: viewModel.SessionId(), RetCols: ko.observableArray ([]) }; $ ('# UploadModal'). AjaxComplete (функция (событие, запрос, настройки) { ko.applyBindings (modalModel, document.getElementById ("zupload")); }); – zach