Gözlemlenebilir öğeden kaldırılsınArray

Question

"Listeler ve koleksiyonlarla çalışma" konusunda takılıyorum ve hatayı bulma konusunda yardıma ihtiyacım var. Sil düğmesi çalışmıyor.

Siparişimi this codepen numaralı telefondan kontrol edebilirsiniz.

code 

Answer 1

this zor olabilir tam olarak ne takip etmek. Olabildiğince değişkenleri kullanmanız ve yalnızca gerçekten ihtiyacınız olduğunda this'u kullanmak iyi bir fikirdir. this kodunun, kodun farklı tedarik edilen bağlamlarda yeniden kullanılabileceğini belirteceğini düşünün. Örneğin, prototipler kullanıyorsanız önemlidir. (Ayrıca, bir bağlama tarafından sağlanan bağlamın her zaman açık olmadığını unutmayın.)

Sık karşılaşılan bir teknik, 'a atadığınız bir kurucuda self değişkenini oluşturmaktır ve sonra onu kullanın. Bu, bağlam ne olursa olsun, işlev çağrılarının amaçlanan şekilde çalışmasını sağlar.

revealing pattern, this pozunuzu en aza indirmenin başka bir yoludur.

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