淘汰订阅多选下拉菜单

Question

在采购订单中，我想根据价格和税金计算所有订单项的总额。 对于每个项目，都有多种税项。 我为此使用敲除绑定。 一切正常，除了“税收”部分。 当我添加或删除新税时，它不会更新总数。 我尝试使用自定义绑定（更新），这似乎对我不起作用。

https://jsfiddle.net/krishnasarma/r0doakyk/

HTML：

<table>
<tbody data-bind='foreach: Entries'>
<tr>
  <td>
  <input type="text" data-bind="value:Amount" />
  </td>
  <td>
    <select multiple data-bind="ddl1: null, SelectedOptions:Taxes"/>
  </td>
</tr>                          
</tbody>
</table>
<input type="text" data-bind="value:$root.Total()" />

JS：

ko.bindingHandlers.ddl1 = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).append('<option value=1>My tax 1</option>');
    $(element).append('<option value=2>My tax 2</option>');
    },
   update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
   alert(valueAccessor());
     }
}


function Entry(child) {
    var self = this;
    self.Amount = ko.observableArray(child.Amount);
    self.Taxes = ko.observableArray(child.Taxes);
}
var VM = {
    Entries: ko.observableArray([]),
    Total: function(){
        var tot = 0;
        for (var i = 0; i < VM.Entries().length; i++) {
                var amt =  parseFloat(VM.Entries()[i].Amount());
            var taxtot = 0;
            for(var j=0;j<VM.Entries()[i].Taxes.length;j++){
                    taxtot += amt*parseFloat(VM.Entries()[i].Taxes[j]);
            }
            tot +=taxtot;
        }
        return tot.toFixed(2);

    }
}
$(function () {
        VM.Entries().push(new Entry({}));
    VM.Entries().push(new Entry({}));
        ko.applyBindings(VM);
});

Answer 1

代码中有几个问题：

对于多选税项，您不需要自定义绑定。 在HTML中，尝试：

<select multiple data-bind="options: $root.TaxOptions, optionsText: function(item) { return item.display; }, selectedOptions: Taxes"/>

然后在JavaScript中：

self.TaxOptions = [{display: "My Tax 1", value: 1}, {display: "My Tax 2", value: 2}];

（有关完整代码，请参见下面的jsfiddle链接）

将Total创建为ko.computed可观察的，因为它取决于Entries可观察的数组。

self.Total = ko.computed(function() {
    var tot = 0;
    for (var i = 0; i < self.Entries().length; i++) {
        var amt =  parseFloat(self.Entries()[i].Amount());    
        var taxtot = 0;
        for(var j=0;j<self.Entries()[i].Taxes().length;j++){
                taxtot += amt*parseFloat(self.Entries()[i].Taxes()[j].value);
        }
        tot +=taxtot;
    }
    return tot.toFixed(2);

    });

请注意，在上面的代码中，当获取Taxes的值时，请使用括号（），因为它是一个可观察的数组。

这个jsFiddle应该可以让您走上正确的轨道：

https://jsfiddle.net/ombk322j/