使用KnockoutJS在Javascript和JQuery中浏览JSON文档数组

Question

Right now I have the following JSON document:

[
   {
      "price":"1.0",
      "shares":13
   },
   {
      "price":"2.0",
      "shares":5
   },
   {
      "price":"3.0",
      "shares":24
   }
]

If someone wants 20 shares, I want to return the lowest price possible for 20 shares. In this case its:

13 shares at $1 ($13)

5 shares at $2 ($10)

2 shares at $3 ($6)

the total cost is $29

The specific knockout code I have to do this gets the 20 shares from a previously defined (and working) this.wantedShares() binding.

code:

    this.totalCost = ko.computed(function(){                
            var wantedShares = this.wantedShares();
            var shareCounter = 0.00;
            var counter = 0;
            var totalPrice = 0.00;

            $.getJSON("sell.json", function(json){  
                $.each(json, function() {
                    if(shareCounter <= wantedShares){
                    shareCounter = shareCounter + json[counter].shares;
                    totalPrice = totalPrice + (json[counter].price * json[counter].shares);
                    counter++;
                    }
                });
            });
            return totalPrice;
    }, this);

This code doesn't work, whatever is happening, its not updating totalPrice at all - it remains at 0. Any ideas?

Answer 1

AJAX是异步的，所以你的返回将在ajax完成之前触发

Answer 2

你的$ .getJSON函数是异步的，当它返回时它会执行你的回调，但同时你已经返回了totalPrice为0.我建议切换到wantedShares的订阅并使totalPrice成为你在回调中设置的可观察量。

Answer 3

$.getJSON is an asynchronous request. The 'A' in "AJAX" = asynchronous.

When Knockout evaluates your computed value, it's not going to wait for the asynchronous operation to complete. Therefore, it will always return 0.

Bottom line: don't do AJAX requests inside your computed value.

Instead, do something like this:

// Fetch all the shares asynchronously.
var allShares = ko.observableArray();
$.getJSON("sell.json", function(shares) { allShares(shares); });

// The totalCost observable is dependent on the allShares.
// When allShares changes asynchronously, totalCost will get re-evaluated.
var totalCost = ko.computed(function() {              
   var shareCounter = 0.00;
   var totalPrice = 0.00;

   allShares().each(function(share) {
       if(shareCounter <= wantedShares().length) {
           shareCounter = shareCounter + share.shares;
           totalPrice = totalPrice + (share.price * share.shares);
       }
   });
});

I've created this JSFiddle that shows it working.