Question

我有一个函数，这是代码：

this.federalPriceComputed = ko.pureComputed(
        function() {
            return ko.utils.arrayMap(this.lineItems(), function(item) {
                var total = item.price() * item.federalTax()
                return formatCurrency(total);
            });
        }, this
    ).extend({ throttle: 500 });

this.statePriceComputed = ko.pureComputed(
            function() {
                return ko.utils.arrayMap(this.lineItems(), function(item) {
                    var total = item.price() * item.stateTax()
                    return formatCurrency(total);
                });
            }, this
        ).extend({ throttle: 500 });

当我运行我的代码时，它会显示statePriceComputed is not defined。

我试图将所有代码保存在模型对象中。

如果我这样做，它就有效。

ko.utils.arrayForEach(myModel.lineItems(), function(item) {
   item.federalPriceComputed = ...
   item.statePriceComputed = .... 
   }
);

更多信息：

ko.observableArray.fn.withIndex = function (keyName) {  
    "use strict";
    var index = ko.computed(function () {
        var list, keys;
        list = this() || [];    // the internal array
        keys = {};              // a place for key/value
        ko.utils.arrayForEach(list, function (v) {
            if (keyName) {          // if there is a key
                keys[ko.utils.unwrapObservable(v[keyName])] = v;    // use it
            } else {
                keys[v] = v;
            }
        });
        return keys;
    }, this);

    // also add a handy add on function to find
    // by key ... uses a closure to access the 
    // index function created above
    this.findByKey = function (key) {
        return index()[key];
    };

    return this;
};

当我绑定变量时，我就像这样做了

    if (stateTax.length) {
       stateTax.attr("data-bind", "text: formatCurrency($data.lineItems.findByKey(\"" + itemId + "\").statePriceComputed())");
    }

// similar code for federal tax

你能否提出为什么选项＃1不起作用的建议。

Answer 1

Then you must have done something wrong? The snippet below shows #1 suggestion working..

function myApp(items) {
  this.lineItems = ko.observableArray(items || []);
  this.federalPriceComputed = ko.pureComputed(function() {
    return ko.utils.arrayMap(this.lineItems(), function(item) {
      var total = item.price() * item.federalTax();
      return total; });
  }, this).extend({ throttle: 500 });
  this.statePriceComputed = ko.pureComputed(function() {
    return ko.utils.arrayMap(this.lineItems(), function(item) {
      var total = item.price() * item.stateTax();
      return total; });
  }, this).extend({ throttle: 500 });
}

var app = new myApp([
  {price: ko.observable(5), stateTax: ko.observable(21), federalTax: ko.observable(2)},
  {price: ko.observable(6), stateTax: ko.observable(12), federalTax: ko.observable(2)},
  {price: ko.observable(10), stateTax: ko.observable(12), federalTax: ko.observable(3)},
  {price: ko.observable(50), stateTax: ko.observable(21), federalTax: ko.observable(4)},
  {price: ko.observable(8), stateTax: ko.observable(12), federalTax: ko.observable(2)},
  {price: ko.observable(75), stateTax: ko.observable(21), federalTax: ko.observable(3)}]);

ko.applyBindings(app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div style="float: left; width: 50%;">
<h3>Federal Price</h3>
<div data-bind="foreach: federalPriceComputed">
  <div data-bind="text: $data"></div>
</div>
</div>
<div style="float: left; width: 50%;">
<h3>State Price</h3>
<div data-bind="foreach: statePriceComputed">
  <div data-bind="text: $data"></div>
</div>
</div>

Knockout将项添加到每个可观察数组

1 个答案: