javascript - Knockout JS 从数组中调用错误的对象

Question

我正在制作一个允许重新订购产品的系统。商店中的每个展示区域都是一个单元，其中有多个组，这些组(依次)容纳多种产品。我目前正在使用 knockout 通过选择元素加载单元，然后循环浏览提供产品数量字段的组。

这一切都有效，但我需要一个全选按钮，将组中的所有产品设置为数量为 1。我已经为组对象提供了一个函数 (allForOne())，该函数应该循环遍历组中的每个产品observable 数组并将其设置为 1，但是，无论我如何将其绑定(bind)到 #allInOne 按钮，它总是将其应用于单元的 observable 组数组中的最后一个组。

例如，当代码第一次加载时，我想选择第一组中的所有内容并将其数量设置为1，但它只会更改最后一组中的数量。

在调用函数之前，我在同一绑定(bind)中使用相同的选择器来“警告”正确的单元名称(基于单元的 groupCounter 属性)，但它返回两个不同的值。

为什么不影响当前组？我一辈子都无法解决这个问题，而且 Google 也没有提供太多帮助。

Here is a JSFiddle ，或者您可以查看下面的代码:

这是 View :

<div class="select-container">
<label for="unit" class="label">Unit</select>
<select name="unit" class="select-unit drop-shadow" data-bind='options: units, optionsText: "skuName", optionsCaption: "Select...", value: unit'></select>
<div>
</div>
<div class="unit-image" data-bind="with: unit">
<img data-bind="attr{ src: $parent.unit().image, alt: $parent.unit().name }">
</div>
<div data-bind="with: unit" class="clearfix products-container">
<div class="clearfix" data-bind="with: $parent.groups()[$parent.groupCounter()]">
    <!--<div data-bind="style: { width: (((parseInt(limit) / parseInt($root.totalLimit))  * 100) - 1)+'%', marginRight: '0.5%', marginLeft: '0.5%'}" style="display: block; position: relative; float: left;">-->
        <h2 data-bind="text: name" style="margin-bottom: 12px;"></h2>
        <div data-bind="foreach: {data: products/*, beforeRemove: hideProduct, afterRender: showProduct*/}">
            <div class="prod-page-product drop-shadow" data-bind="style: { width: ((100 / $parent.limit) - 1)+'%', marginRight: '0.5%', marginLeft: '0.5%'}">
                <p><span data-bind='text: sku'></span></p>
                <div>
                    <div class="add-container"><a href='#' data-bind="click: incrementQuantity" class="add-product">+</a></div>
                    <div><input type="number" class="is-numeric" min="0" data-bind='value: quantity, valueUpdate: "afterkeydown"' /></div>
                    <div class="remove-container"><a href='#' data-bind="click: decrementQuantity" class="remove-product">-</a></div>
                </div>
            </div>
        </div>
    <!--</div>-->
    <div class="clearfix">
        <button id="nextProdGroup" class="products-button float-left" data-bind="enable:$root.firstGroupBool, click: $root.prevGroup, style: { width: productWidth, maxWidth: ((100/4) - 1)+'%', marginRight: '0.5%', marginLeft: '0.5%'}">Prev Group</button>
        <button id="prevProdGroup"  class="products-button float-left" data-bind="enable:$root.nextGroupBool, click: $root.nextGroup, style: { width: productWidth, maxWidth :((100/4) - 1)+'%', marginRight: '0.5%', marginLeft: '0.5%'}">Next Group</button>

        <!--This is the offending button binding-->
        <button id="allForOne" class="products-button float-left" data-bind="click: function() { alert('Expected Group: '+$root.groups()[$root.groupCounter()].name());  $root.groups()[$root.groupCounter()].allForOne()}, style: { width: productWidth, maxWidth :((100/4) - 1)+'%', marginRight: '0.5%', marginLeft: '0.5%'}">This is what messes up</button>


    </div>
</div>
</div>
<div id="shadow-overlay" class="ui-overlay" data-bind="visible: loaderBool">
<div class="ui-widget-overlay"></div>
<div id="top-overlay" class="ui-overlay" style="width: 50%; height: 80%; position: absolute; left: 25%; top: 10%;"></div>
<div id="ajax-loading-container">
    <p class="ajax-loader-text">Loading...</p>
</div>

这是 View 模型:

var Product = function(id, sku) {
    var self = this;
    //Properties
    self.id = ko.observable(id);
    self.sku = ko.observable(sku);
    self.quantity = ko.observable(0);

    //Methods
    self.incrementQuantity = function(product) {
    var previousQuantity = parseInt(self.quantity());
        self.quantity(previousQuantity+1);
    };
    self.decrementQuantity = function(product) {
    var previousQuantity = parseInt(self.quantity());
        if(self.quantity() > 0)
        {
            self.quantity(previousQuantity-1);
        }
    };
};


//The object with the called function
var Group = function(name, limit, productList)
{
    self = this;
    //Properties
    self.name = ko.observable(name);
    self.nametwo = name;
    self.limit = limit;
    self.products = ko.observableArray();
    self.productWidth = ko.pureComputed(function(a, b)
    {
        return ((100 / limit) - 1)+'%';
    });

    //Methods

    //---------The offending function
    self.allForOne = function() {
        alert("Returned Group: "+self.name());
        ko.utils.arrayForEach(self.products(), function(product) {
            product.quantity(1);
        });
    };


    //Initial population
    $.each(productList, function(key, product) {
        self.products.push(new Product(product.id, product.sku));
    });
}


var Unit = function() {
    var self = this;
    //Properties
    self.unit = ko.observable();
    self.groups = ko.observableArray();
    self.groupCounter = ko.observable(0);
    self.lastGroup = ko.observable(true);
    self.totalLimit = 0;
    self.saved = true;
    self.loaderBool = ko.observable(false);
    self.firstGroupBool = ko.pureComputed(function()
    {
        return (self.groupCounter() < 1 ? false : true);
    });
    self.nextGroupBool = ko.pureComputed(function()
    {
        return (self.lastGroup() == true ? false : true);
    });

    self.unit.subscribe(function() {
        self.populateGroup();
    });

    //Methods
    self.onLoadCheck = (function() {
        if(units.length == 1)
        {
            self.unit(units[0]);
        }
    });

    self.populateGroup = function() {
        self.loaderBool(true);
        self.groups([]);
        //setTimeout(function() {
            self.TotalLimit = 0;
            $.each(self.unit().group, function(groupKey, groupVal) {
                //setTimeout(function() {
                    self.groups.push(new Group(groupVal.name, groupVal.limit, groupVal.product));
                //}, 0);
                self.totalLimit += parseInt(groupVal.limit);
            });
            self.groupCounter(0);
            self.lastGroup(false);
            self.loaderBool(false);
        //}, 0);
        console.log(self.groups());
        console.log(self.groups()[self.groupCounter()]);
    };

    self.prevGroup = function(a, b) {
        self.save(a, b);
        var groupCounter = parseInt(self.groupCounter());
        self.groupCounter(groupCounter-1);
        if(self.groupCounter() != self.groups().length-1)
        {
            self.lastGroup(false);
        }
    };
    self.nextGroup = function(a, b) {
        self.save(a, b);
        var groupCounter = parseInt(self.groupCounter());
        self.groupCounter(groupCounter+1);
        if(self.groupCounter() == self.groups().length-1)
        {
            self.lastGroup(true);
        }
    };

    self.save = function(a, b) {
        var productsToSave = self.groups()[self.groupCounter()].products();
        var dataToSave = $.map(productsToSave, function(line) {
            return {
                id: line.id(),
                quantity: line.quantity()
            }
        });
        if(productsToSave.length == 0)
        {
            dialog("Error", "You cannot submit before you add products.");
            return false;
        }
        else
        {
            var caller = $(b.toElement);
            //sendOrder("baskets/update", {products: dataToSave}, caller);

            if(caller.attr("id") == "submitProdGroup")
            {
                window.location = baseUrl+"basket";
            }
        }
    };

};

Answer 1

看看这个:http://jsfiddle.net/rks5te7v/5/我使用这样的 View 模型重写了您的代码(查看上面的网址):

function ViewModel() {
    var self = this;
    self.units = ko.observableArray();

    self.chosenUnit = ko.observable();
    self.chosenGroup = ko.observable(0);

    self.goToNextGroup = function () {
        self.chosenGroup(parseInt(self.chosenGroup()) + 1);
    };

     self.goToPrevGroup = function () {
        self.chosenGroup(parseInt(self.chosenGroup()) - 1);
    };

    self.setGroupAs1 = function () {
        var products = self.chosenUnit().groups()[self.chosenGroup()].products();
        ko.utils.arrayForEach(products, function (product) {
            product.quantity(1);            
        });
    };

    //loading data
    var product1 = new Product('1', 'P1');
    var product2 = new Product('2', 'P2');
    var product3 = new Product('3', 'P3');
    var product4 = new Product('4', 'P4');

    var group1 = new Group('G1', [product1, product2]);
    var group2 = new Group('G2', [product3, product4]);

    self.units.push(new Unit('Unit 1', [group1, group2]));
};

它能解决您的问题吗？ :)