Knockout.js + ES6 +アンダースコアテンプレート

Question

私はKnockout.jsを使って製品カートを作成しています。各項目はプラスとマイナスのボタンと削除ボタンを出力します。私の目的は、プラスとマイナスの量を増減できるようにすることと、製品を取り除くための除去ボタンです。私の制約は、JQueryを使用できないことです。

私はShopView、ShopModel、ShopItem（ShopItemはShopModel内の観測可能な配列にプッシュされる個々の項目です）を持つように私のアプリの懸念事項を分けようとしました。ボタンはレンダリングされますが、個々のremove/add/minusボタンをクリックしてこの値をコンソールに記録すると、個々の要素を削除または変更するのではなく、JSクラスのみを表示できます。どんな洞察力も大変高く評価されます。

index.htmlを

<script type="text/html" id="itemsList"> 
    {{ _.each(items(), function(item) { }} 
     <a href="#" data-bind="click: minus" class='left-minus'>&ndash;</a> 
     <p class="qty" data-bind="text: item.quantity"></p> 
     <a href="#" data-bind="click: remove" class="remove-product">Remove</a> 
     <a href="#" data-bind="click: plus" class='right-plus'>&plus;</a> 
    {{ }) }} 
</script> 

<section data-bind="template: { name: 'itemsList' }" class="items-inner"></section>` 

shopView.js

class shopView { 
    constructor() { 
     this.setupShop() 

    } 

    setupShop(){ 
     this.model.items.push(new Item(97, 'cover-3', '/media/img/cover-3.jpg', 'Issue 5', 'Spring Summer 17', 1, 10)); 
     ko.applyBindings(this.model); 
    } 
} 

module.exports = shopView 

shopView.js

：私は、キーパーツの最低限のスニペットを含めました

let ko = require('knockout'); 

class shopItem{ 
    constructor (id, url, thumbnail, title, edition, quantity, price) { 
     this.id = ko.observable(id)(), 
     this.thumbnail = ko.observable(url)(), 
     this.title = ko.observable(title)(), 
     this.edition = ko.observable(edition)(), 
     this.quantity = ko.observable(quantity)(), 
     this.price = ko.observable(price)(); 
     this.add = function(){ 

     }; 
     this.minus = function(){ 

     }; 
    } 
} 

module.exports = shopItem; 

shopModel

ショップ商品

class shopModel { 
    constructor() { 
     this.items = ko.observableArray([]); 

     this.minus = function(item){ 
      console.log(item); 
     }; 

     this.plus = function(){ 

     }; 

     this.remove = (item) => { 
      this.items.remove(item); 
     }; 
    } 
} 


module.exports = shopModel; 

Answer 1

click結合は、コールバック関数に電流$data値を提供します。しかしループのためにUnderscoreを使用しているので、$dataはアイテムではありません。あなたはこの日および年齢でノックアウトを使用しているのはなぜ

<a href="#" data-bind="click: function() {minus(item)}" class='left-minus'>&ndash;</a>