Question

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

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

问题是计算机似乎不起作用，我找不到一个能做我想要的方法。我创造了一个小提琴，说明了我做这项工作的遗憾尝试

我们将不胜感激。

我的代码如下所示：

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>

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

Knockout在可观察数组的切片上计算，这是可能的

1 个答案: