在可观察数组的切片上计算淘汰赛，这可能吗答案

【问题标题】：Knockout computed on slice of an observable array, is this posible在可观察数组的切片上计算淘汰赛，这可能吗
【发布时间】：2012-11-27 06:44:31
【问题描述】：

我试图提供一种机制来编辑可观察数组中的条目。显示器将有两个部分。第一个是显示有限数量字段的数组条目，第二个允许用户编辑所选条目的所有字段。

为此，我为数组的每个显示条目提供了一个双击事件，该事件将使用索引和计算出的 observable 来选择数组的一个切片。希望我可以使用这种方法来编辑数组条目。

问题是计算似乎不起作用，我找不到可以满足我要求的方法。我创建了一个小提琴，说明我很抱歉尝试完成这项工作

http://jsfiddle.net/rscidmore/YrsCj/

您的帮助将不胜感激。

我的代码如下所示：

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>

【问题讨论】：

标签： arrays knockout.js slice computed-observable

【解决方案1】：

通常您想要做的是将您的“选定”项目表示为可观察的。通过event / click 绑定连接的处理程序接收当前数据项作为第一个参数。这可用于直接填充您的“选定”可观察对象。

所以，它会是这样的：

var ContactModel = function() {
  this.id = ko.observable();
  this.name = ko.observable();
  this.addresses= ko.observableArray();
  this.selectedAddress = ko.observable();    
};

然后，您可以像这样绑定它：

<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 直接绑定到 observable。

示例：http://jsfiddle.net/rniemeyer/2DmUf/

使用函数示例而不是直接绑定到此处的可观察对象：http://jsfiddle.net/rniemeyer/mDKGV/（只是为了帮助说明）

对“已选择”可观察对象做的一个方便的事情是在一个区域周围使用with 绑定，因此每当您更改为新的选定项目时它都会重新渲染，并在该项目为空时提供保护。

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

【讨论】：

像往常一样，我找到了一种更困难的方法来完成我想要的事情，但发现它不起作用。谢谢....这行得通。