Knockout.js + ES6 +下划线模板

我想要让我的头部使用Knockout.js来创建产品购物车。每个项目输出一个加号和减号按钮以及一个删除按钮。我的目标是能够正负增加或减少数量，删除按钮可以删除产品。我的约束是我不能使用JQuery。Knockout.js + ES6 +下划线模板

我试图分开我的应用程序的关注点，以便我有ShopView，ShopModel和ShopItem（ShopItem是推送到ShopModel中的可观察数组的个别项目）。按钮被渲染，但是当点击一个单独的删除/添加/减号按钮并将其值记录到控制台时，我只能看到我的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;

来源

2017-04-17 user2315552

为什么你在这个时代使用Knockout？ – Stuart

的click结合提供当前$data值回调函数。但是，因为您正在使用Underscore进行循环，因此$data不是该项目。你可以改变你的click绑定到这样的事情：

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

来源

2017-04-17 07:39:26

Knockout.js + ES6 +下划线模板

回答

相关问题