Knockout用于编辑和创建可观察数组的项目相同的表单

Question

新手到ko，我正在努力与此。我有一个用于添加新地址的表单（为了简化它，我们只使用一个属性），更新了一个arrray（并将它显示在列表中），我想要实现的是能够选择一个地址数组并能够在窗体中显示它，这是可行的，但是那里的改变没有更新列表中显示的内容。

代码视图中：在脚本

<div data-bind="with: newAddress" class="span6"> 
    <input data-bind="value: Line1()" placeholder="Address line 1" /> 
    <div> 
     <button data-bind="click: $parent.addAddress">Add</button> 
    </div> 
</div> 

<div class="span4"> 
    <div data-bind="visible: addresses().length > 0"> 
     <div data-bind="foreach: addresses"> 
      <address> 
       <span data-bind="click: $parent.removeAddress">Remove</span> 
       <span data-bind="click: $parent.editAddress">Edit</span> 
       <div data-bind="text: Line1"></div>     
      </address> 
     </div> 
    </div> 
</div> 

相关代码

function ViewModel() { 
    var self = this; 

    self.addresses = ko.observableArray(ko.utils.arrayMap(addresses, function(address) { 
     return new Address(address); 
    })); 

    self.newAddress = { 
     Line1: ko.observable(""), 
    }; 

    self.addAddress = function() { 
     self.addresses.push(new Address(this); 
     self.newAddress.Line1(""); 
    }; 

    self.addAddress = function() { 
     self.addresses.push(new Address(this); 
     self.newAddress.Line1(""); 
    }; 

    self.editAddress = function() { 
     self.newAddress.Line1(this.Line1); 
    }; 

    self.remove = function() { 
     self.parties.remove(this); 
    }; 

}; 

// As it is used for both the addresses coming from the server and the added in 
// the form I do this check 
function Address(address) { 
    this.Line1 = ko.isObservable(address.Line1) ? address.Line1() : address.Line1; 
} 

我怎么能实现绑定形式的变化时，选择在显示数据的地址之一列表？

谢谢

Answer 1

地址没有被更新，因为它不是可观察的。

更改此：

function Address(address) { 
    this.Line1 = ko.isObservable(address.Line1) ? address.Line1() : address.Line1; 
} 

这样：

function Address(address) { 
    this.Line1 = ko.observable(ko.isObservable(address.Line1) ? address.Line1() : address.Line1); 
} 

而且，在你，如果你已获得可观察到的不知道或没有，你可以使用ko.utils.unwrapObservable来获取案件值如下：

this.Line1 = ko.observable(ko.utils.unwrapObservable(address.Line1)); 

在仔细检查你的代码后，我认为有一个公司可以做的改进之处：

// Changed newAddress to observable with empty AdressModel 
self.newAddress = ko.observable(new Address("")); 

// I am assuming correct context when calling this method, 
// for example clicking on a list of addressItems in the view 
self.editAddress = function(addressItem) { 
    self.newAddress(addressItem); 
}; 

// The only thing the update method does is 
// emptying the editor form 
self.updateAddress = function() { 
    self.newAddress(new Address("")); 
}; 

// This method can only be used for adding new items, 
// not updating existing items 
self.addAddress = function() { 
    self.addresses.push(new Address(this)); 
    self.newAddress(new Address("")); 
};