0

監視可能な配列のエントリを編集するためのメカニズムを提供しようとしています。ディスプレイには2つのセクションがあります。1つ目は、限られた数のフィールドを表示する配列エントリであり、2つ目は、ユーザーが選択したエントリのすべてのフィールドを編集できるようにするものです。

これを行うために、配列の表示されたエントリごとにダブルクリックイベントを提供しました。このイベントは、インデックスと計算されたオブザーバブルを使用して配列のスライスを選択します。このメソッドを使用して配列エントリを編集できることを願っています。

問題は、計算が機能していないように見え、私が望むことを実行するメソッドを見つけることができないことです。私はこの作品を作るための私の申し訳ない試みを説明するフィドルを作成しました

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、領域の周りのバインディングを使用することです。これにより、新しく選択されたアイテムに変更するたびに再レンダリングされ、アイテムがnullの場合に保護されます。

<div class='contactInfo' data-bind="with: selectedAddress">
  <input class='dat2' type='text' data-bind="value: address" />  
</div>
于 2012-12-09T20:01:18.467 に答える