0

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

为此，我为数组的每个显示条目提供了一个双击事件，该事件将使用索引和计算出的 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>
4

1 回答 1

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>
于 2012-12-09T20:01:18.467 回答