Question

我已经阅读了关于此淘汰赛排序问题的其他堆栈溢出但似乎无法解决我自己的问题。

我希望新添加的项目在提交时按字母顺序自动排序。继承我的代码......

<h1>Shopping Cart</h1>
        <hr />
<h3>Add New Item</h3>
<label>Name: </label>
        <input type="text" data-bind="value: newItemName, valueUpdate: 'keyup'" />
        <br />
<label>Unit Price: </label>
        <input type="number" min="0.25" step="0.25" data-bind="value: newItemPrice, valueUpdate: 'keyup'" />
        <br />
<label>Quantity: </label>
        <input type="number" min="1" step="1" data-bind="value: newItemQuantity, valueUpdate: 'keyup'" />
        <br />
<button data-bind="click: addNewItem, enable: addNewItemEnabled">Add Item</button>
<hr />
<h3>Items in Cart</h3>
<table>
        <thead>
        <tr>
                <th>Name</th>
                <th>Unit Price</th>
                <th>Quantity</th>
        </tr>
        </thead>
        <tbody data-bind="foreach: itemsInCart">
        <tr>
                <td data-bind="text: name"></td>
                <td>$<span data-bind="text: price"></span></td>
                <td><input data-bind="value: quantity"/></td>
                <!--<td>$<span data-bind="value: totalPrice"></span></td>-->
                <td><a href="#" data-bind="click: $root.removeItem">X</a></td>
        </tr>
        </tbody>
</table>
<button data-bind="click: sortItems">Sort</button>

<h3> Combined Cost $<span data-bind="text: combinedCost()"></span></h3>

这是我的淘汰代码......

var viewModel = {
    newItemName: ko.observable(),
    newItemPrice: ko.observable(0.25),
    newItemQuantity: ko.observable(1),


    addNewItem: function () {
        //this creates the new item
        var newItem = {
            name: ko.observable(this.newItemName()),
            price: ko.observable(this.newItemPrice()),
            quantity: ko.observable(this.newItemQuantity())
        };
        //these boom-a-rang to the DOM
        this.itemsInCart.push(newItem);
        this.newItemName("");
        this.newItemPrice(0);
        this.newItemQuantity(0);

    },
    //Remove from array
    removeItem: function(item) {
        viewModel.itemsInCart.remove(item)
    },
    //the cart storage
    itemsInCart: ko.observableArray([])

};

viewModel.sortedItems = ko.computed(function(){
    return itemsInCart().sort(function (a,b){
        return a.newItemName() == b.newItemName() ? 0: (a.newItemName() < b.newItemName() ? -1 : 1);
    });
}, viewModel);

//whenever any events fire including keyups, downs,..etc this part updates
viewModel.addNewItemEnabled = ko.pureComputed(function() {
    var name = this.newItemName(),
        price = this.newItemPrice(),
        quantity = this.newItemQuantity();
    return name && name.length;
}, viewModel);


viewModel.combinedCost = ko.computed(function() {
        var total = 0;
        for (var i = 0; i <= viewModel.itemsInCart().length - 1; i++)
            total += parseFloat(viewModel.itemsInCart()[i].price() * viewModel.itemsInCart()[i].quantity());
            console.log("test", total);
        return total;
    }, viewModel);

viewModel.sortList = ko.computed(function() {

}, viewModel);


ko.applyBindings(viewModel);

提前致谢

Answer 1

你可以做这样的事情

<强> [EDITED]

addNewItem: function () {
    //this creates the new item
    var newItem = {
        name: ko.observable(this.newItemName()),
        price: ko.observable(this.newItemPrice()),
        quantity: ko.observable(this.newItemQuantity())
    };
    //these boom-a-rang to the DOM
    this.itemsInCart.push(newItem);
    this.newItemName("");
    this.newItemPrice(0);
    this.newItemQuantity(0);
    
  this.ItemsInCart.sort(function(a,b){
     var a1 = a.name().toLowerCase();
     var b1 = b.name().toLowerCase();
     return a1.localeCompare(b1);
  });



}

按字母排序排序

1 个答案: