Knockout在可觀察數組的片上計算，這是否可行

我正試圖提供一種用於編輯可觀察數組中的條目的機制。顯示屏將有兩個部分。第一種是數組條目顯示有限數量的字段，第二種允許用戶編輯選定條目的所有字段。Knockout在可觀察數組的片上計算，這是否可行

爲此，我爲數組的每個顯示條目提供了雙擊事件，事件將使用索引和計算的可觀察值來選擇數組的一個切片。希望是我可以使用這種方法來編輯數組條目。

問題是計算似乎不工作，我找不到我想要的方法。我創建說明我對不起企圖使這項工作

您的幫助，將不勝感激小提琴。

我的代碼如下所示：

var contactModel = function() { 
    var self = this; 
    self.id = ko.observable(); 
    self.name = ko.observable(); 
    self.addresses= ko.observableArray(); 
    self.selectIndex = ko.observable(0); 
    self.selectedAddress = ko.computed(function() { 
    return self.addresses.slice(self.selectIndex()); 
    }); 
}; 
var addressModel = function(id, type, address) { 
    var self = this; 
    self.id  = ko.observable(id); 
    self.type  = ko.observable(type); 
    self.address = ko.observable(address); 
}; 


var contact = new contactModel(); 
contact.id = 1; 
contact.name = 'John Smith'; 
var addr = new addressModel('1', 'billing', '123 Your Street') 
contact.addresses.push(addr); 
addr = new addressModel('2', 'shipping', 'ABC Your Avenue') 
contact.addresses.push(addr); 
addr = new addressModel('3', 'home', 'XYZ Your Drive') 
contact.addresses.push(addr); 


ko.applyBindings(contact);

而且我的HTML看起來像這樣：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body class='ui-widget'> 
    <div class='contactInfo'> 
     <span class='id' data-bind="text: id"></span> : 
     <span class='dat1' data-bind="text: name"></span> 
    </div> 
    <div class='container'> 
     <!-- ko foreach: addresses -->  
     <div class='addrs' data-bind="event: { dblclick: function() { 
      $parent.selectIndex($index());}}"> 
      <span class='id' data-bind="text: id"></span> : 
      <span class='dat1' data-bind="text: type"></span> 
      <span class='dat2' data-bind="text: address"></span> 
     </div> 
     <!-- /ko --> 
    </div> 
    <div class='contactInfo'> 
     <span class='id' data-bind="text: selectIndex"></span> : 
     <input class='dat2' type='text' data-bind="value: selectedAddress.address" /> 
    </div>  
    </body> 
</html>

來源

2012-12-09 Rob Scidmore

通常你會想要做的是代表你的「選擇」項目作爲可觀察到的。通過event/click綁定連接的處理程序接收當前數據項作爲第一個參數。這可以用來直接填充你的「選擇的」觀察值。

因此，它會像：

然後，您可以綁定反對它想：

<div class='container'> 
    <!-- ko foreach: addresses -->  
    <div class='addrs' data-bind="event: { dblclick: $parent.selectedAddress }"> 
     <span class='id' data-bind="text: id"></span> : 
     <span class='dat1' data-bind="text: type"></span> 
     <span class='dat2' data-bind="text: address"></span> 
    </div> 
    <!-- /ko --> 
</div>

請注意，您可以在您接觸模型創建一個名爲「selectAddress」功能，使用作爲第一個參數傳遞的項目填充selectedAddress。但是，由於observable已經是一個函數，並使用傳遞給它的第一個參數來填充它的值，所以在上面的示例中，我直接將dblclick與可觀察值綁定。

樣品在這裏：http://jsfiddle.net/rniemeyer/2DmUf/

樣品與函數，而不是直接綁定針對可觀測的位置：http://jsfiddle.net/rniemeyer/mDKGV/（只是爲了幫助清楚）

一個方便的事情做一個「選擇」觀察到，將圍繞某個區域使用綁定，所以無論何時更改爲新的選定項目並在項目爲空時進行保護，它都會重新呈現。

<div class='contactInfo' data-bind="with: selectedAddress"> 
    <input class='dat2' type='text' data-bind="value: address" /> 
</div>

來源

2012-12-09 20:01:18

像往常一樣，我發現了一個更難的方法來完成我想要的，並發現它沒有工作。謝謝....這工作。 –

Knockout在可觀察數組的片上計算，這是否可行

回答

相關問題