另一個問題處理淘汰賽...敲除「與」綁定刪除子元素?
,我有以下視圖模型我創建(簡體):
var SearchViewModel = function() {
var self = this;
//Properties
self.resultData = ko.observableArray();
self.selectedItem = ko.observable();
//Methods
self.SearchByName = function (name) {
var url = "services/User/SearchByName/" + escape(name),
callback = function (data) { $.each(data, function (i, e) { self.resultData.push(ko.mapping.fromJS(e)); }); self.selectedItem = self.resultData()[0]; };
$.getJSON(url, callback);
};
self.UpdateSelection = function (item) {
self.selectedItem = item;
};
};
有了這個模式,我使用下面的代碼將其綁定到UI:
var vm = new SearchViewModel();
vm.SearchByName("Doe");
ko.applyBindings(vm);
結果適用於以下:
<div class="search-results" data-bind="foreach: resultData">
<div class="search-result" data-bind="click: $parent.UpdateSelection">
<input type="hidden" data-bind="value: Id"/>
<div>
<h4 data-bind="text: Name"></h4>
</div>
<div class="row-fluid">
<div class="span6">
<label class="font-italic">Username: </label>
<span data-bind="text: Username"></span></div>
<div class="span6">
<label class="font-italic">Created: </label>
<span data-bind="text: Created"></span>
</div>
</div>
</div>
</div>
所有這些工作都很好,但是當其中一個結果被點擊時,我想要打開一個新的jQuery UI對話框,允許用戶編輯一些字段。我試圖使用以下方法來實現這一點:
<div id="edit-user-form" title="Edit User" data-bind="with: selectedItem">
<div class="row-fluid">
<div class="span5">
<label>Last Name:</label>
<input type="text" data-bind="value: LastName" />
</div>
<div class="span4">
<label>First Name:</label>
<input type="text" data-bind="value: FirstName" />
</div>
<div class="span3">
<label>Middle Name:</label>
<input type="text" data-bind="value: MiddleName" />
</div>
</div>
,但是當我在看的形式,所有的HTML孩子到edit-user-form
被消滅了。我讀過這些問題可能是由jQuery UI對話框引起的,以及它如何移動元素,但是沒有打開對話框並檢查html,它仍然是空白的。
爲什麼會發生這種情況?我認爲這可能是因爲with
綁定,但我認爲這是它的目的。
使用Knockout v2.3.0。
這看起來好像可以用於搜索結果部分,但是如何幫助我將綁定點擊的項目綁定到其他對話框? – Justin
看來我的其他一些代碼干擾了淘汰賽對可觀察對象變化做出反應的能力。 – Justin