Arrays 在一个可观测数组的切片上计算的敲除，这是可能的吗_Arrays_Knockout.js_Slice_Computed Observable

Arrays 在一个可观测数组的切片上计算的敲除，这是可能的吗

arrays knockout.js

Arrays 在一个可观测数组的切片上计算的敲除，这是可能的吗,arrays,knockout.js,slice,computed-observable,Arrays,Knockout.js,Slice,Computed Observable,我试图提供一种机制来编辑可观察数组中的条目。显示器将有两个部分。第一个是显示有限字段数的数组条目，第二个允许用户编辑所选条目的所有字段为此，我为数组的每个显示条目提供了一个双击事件，该事件将使用索引和计算的可观察值来选择数组的一个片段。希望我可以使用这个方法来编辑数组条目问题是，计算机似乎不起作用，我找不到一个方法来满足我的需要。我做了一把小提琴，说明我很抱歉试图让这件事成功谢谢你的帮助我的代码如下所示： var contactModel = function() { var se

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

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

问题是，计算机似乎不起作用，我找不到一个方法来满足我的需要。我做了一把小提琴，说明我很抱歉试图让这件事成功

谢谢你的帮助

我的代码如下所示：

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);

<!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>

我的html如下所示：

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);

<!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>


:
:
:

通常，您要做的是将“选定”项表示为可观察项。通过

事件连接的处理程序

单击

绑定接收当前数据项作为第一个参数。这可用于直接填充“选定”可观察对象

所以，这就像：

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>

像往常一样，我找到了一个更难的方法来完成我想要的，但发现它不起作用。谢谢这起作用了。