observableArrayから要素を削除します。

Question

"リストとコレクションを使用して作業中"に固執しています。エラーの検出に役立つ必要があります。削除ボタンが機能しません。

私のsouceはthis codepenで確認できます。

code 

Answer 1

thisが正確に何を追跡することが困難な場合があります。可能であれば変数を使用することをお勧めします。本当に必要なときにのみthisを使用してください。 thisのコードは、別の提供されたコンテキストでコードを再利用できることを示すものと考えてください。たとえば、プロトタイプを使用している場合は重要です。

一般的な手法の1つは、thisにすぐに代入するコンストラクタ内に変数selfを作成し、それを使用することです。これにより、コンテキストが何であっても、関数呼び出しは意図したとおりに動作します。

revealing patternは、thisの露出を最小限に抑えるための別の方法です。

// KO WITH OBSERVABLEARRAY 
 

 
function mMember(name, gender) { 
 
    this.name = name; 
 
    this.gender = ko.observable(gender); 
 
} 
 

 
function vmMember() { 
 
    var self = this; 
 

 
    self.MemberGender = [{ 
 
    gen: 'Male', 
 
    tag: 'M' 
 
    }, { 
 
    gen: 'Female', 
 
    tag: 'F' 
 
    }]; 
 

 

 
    self.members = ko.observableArray([ 
 
    new mMember('Mark', this.MemberGender[0]), 
 
    new mMember('Lester', this.MemberGender[0]) 
 
    ]); 
 

 

 
    self.add = function() { 
 
    self.members.push(new mMember('', this.MemberGender[0])); 
 
    }; 
 

 

 
    self.remove = function(member) { 
 
    self.members.remove(member); 
 
    } 
 

 
} 
 

 

 
ko.applyBindings(new vmMember());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<!-- OBSERVABLE ARRAY HERE --> 
 

 
<button data-bind='click:add'>Add</button> 
 

 
<table> 
 

 
    <th> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td>Gender</td> 
 
     <td>Initial</td> 
 
    </tr> 
 
    </th> 
 

 
    <tbody data-bind='foreach:members'> 
 
    <tr> 
 
     <td> 
 
     <input data-bind='value:name' /> 
 
     </td> 
 
     <td> 
 
     <select data-bind="options: $root.MemberGender, value: gender,optionsText: 'gen'"></select> 
 
     </td> 
 
     <td data-bind='text:gender().tag'></td> 
 
     <td> 
 
     <button data-bind='click:$root.remove'>x</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>