敲除「與」綁定刪除子元素？

，我有以下視圖模型我創建（簡體）：

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。

來源

2013-08-29 Justin

使用模板綁定，而不是使用選定的項目

例如模板結合在這裏

視圖模型：

viewModel.selectedArticle = ko.observable(); 
viewModel.templateToUse = function(item) { 
return item === this.selectedArticle() ? ‘edit’ : this.selectedView(); 
}.bind(viewModel);

HTML：

<div data-bind="template: { name: templateToUse, foreach: articles }"></div>

鏈接：http://jsfiddle.net/rniemeyer/Ujr4z/

希望這可以幫助你

來源

2013-08-30 01:00:22 nikhil

這看起來好像可以用於搜索結果部分，但是如何幫助我將綁定點擊的項目綁定到其他對話框？ – Justin

看來我的其他一些代碼干擾了淘汰賽對可觀察對象變化做出反應的能力。 – Justin

可以使用

if

和

ifnot

綁定到兩個HTML腳本之間切換... !!! ...這就是我做什麼作爲模板的替代方案

來源

2013-11-28 02:12:11 nikhil

爲什麼要添加另一個答案而不是編輯以前的答案？ – pinckerman

這是敲除綁定的另一種方式，而不是使用模板 – nikhil

敲除「與」綁定刪除子元素？

回答

相關問題