在Knockout JS中访问普通JS数组中的observable的值?

时间:2014-05-08 22:19:45

标签: javascript html knockout.js ko.observablearray

背景

我有一个普通的JS数组,最初是空的。我后来用值来填充它。发送给它的值是Knockout observables的数字。稍后,我想将这些值与另一个knockout可观察数组中的值进行比较。我的问题是每当我传递我的数组循环中当前项的索引,并传递该索引值(一个数字!),该数组返回一个函数。要了解一下,请查看随后的JS。

请注意,我的项目和实际脚本可在JSBin上查看。此外,要在控制台中查看问题,您必须添加作业,然后按'排序'。

  

JSBin http://jsbin.com/fehoq/177/edit] 1

JS

//example script that follows actual script

var _this = this;

//initialize my array
this. lowest = [];

// I want to compare values in lowest to values in this array
this.scores = ko.observableArray();

// method that does comparison
this.myMethod = function(){

    // initialize my helper, k
    var k;  
     ...

    // loop through one array
    ko.utils.arrayForEach(_this.scores(), function (score) {

        // make sure my value is a number...
        if (!isNaN(parseFloat(score()))) {

           // this is important, I need to current index for comparison
           k = _this.scores.indexOf(score);
           console.log(k);

           // this is where things break - it prints a function, not a value!
           console.log(_this.lowest[k]);

           // useless check, the value is a function, so they're always different
           if (score()!=_this.lowest[k]){
             // do stuff
           }
        }
    }
}

更新

使用我使用的方法,也许有人会注意到我错过的东西,因为我的语法是正确的(?)。

this.mean = (function(scores,i) {
  var m = 0;
  var count = 0;
  var k;

  ko.utils.arrayForEach(_this.scores(), function(score) {

    console.log([typeof score(), score()]);

    if (!isNaN(parseFloat(score()))) {

      console.log(i);
      console.log(_this.lowest[i]);

      if (score() != _this.lowest[i]) {
        m += parseFloat(score());
        count += 1;
      }

    }

  });

 if (count) {
    m = m / count;
    return m.toFixed(2);
  } else {
    return 'N/A';
  }
});
}

更新2

以防其他人在这里徘徊,因为我的问题仍未解决。以下代码是我如何设置lowest

的值
this.dropLowestScores = function() {
    ko.utils.arrayForEach(_this.students(), function(student){
        var comparator = function(a,b){
          if(a()<b()){
            return 1;
          } else if(a() > b()){
            return -1;
          } else {
            return 0;
          }
        };       
        var tmp = student.scores().slice(0);
        tmp.sort(comparator);
        student.lowest = ko.observableArray(tmp.splice((tmp.length-2),tmp.length-1));
    });
};

杰出问题,2014年5月9日

  1. Jeremy的剧本运行但没有达到预期的效果。例如,console.log(_this.lowest[k])打印undefined,就像我的一样。此外,不应跳过匹配的分数,它们应该是。

  2. Jeremy的脚本将lowest指定为ko.observable。我的脚本现在也有lowest作为ko.observable,但为什么不应该使用普通的JS数组呢?我只需要lowest在点击它所绑定的按钮时进行更新,并且已经处理了这些绑定。

1 个答案:

答案 0 :(得分:1)

这就是观察者在Knockout中的工作方式。

创建一个时,您正在创建一个函数。

var myObservable1 = ko.observable(); // Create it.
var myObservable2 = ko.observable("Hola!"); // Create it with a value.

console.log(typeof myObservable2); // It is indeed a function
console.log(typeof myObservable2()); // That returns a string
console.log(myObservable2()); // And get the value.

根据评论中的问题进行编辑

var koTest = ko.observableArray();
koTest.push("Line0");
koTest.push("Line1");
koTest.push("Line2");
koTest.push("Line3");
koTest.push("Line4");

var jsTest = [];
jsTest.push("Line0");
jsTest.push("Line1");
jsTest.push("Line2");
jsTest.push("Line3");
jsTest.push("Line4");


alert(koTest()[2]);
alert(jsTest[2]);
alert(koTest()[2] === jsTest[2]);

测试代码

我继续对你的代码进行可运行的测试,一切都对我很好。我不得不对_this的内容做出一些假设 - 尤其是lowest的声明,我根据您访问它的方式制作了observableArray

无论如何,这段代码运行:

    var _this = {
        scores: ko.observableArray(),
        lowest: ko.observableArray()
    };


    var mean = (function(scores) {
        var m = 0;
        var count = 0;
        var k;


        ko.utils.arrayForEach(_this.scores(), function(score) {

            console.log([typeof score(), score()]);

            if (!isNaN(parseFloat(score()))) {
                k = _this.scores.indexOf(score);
                console.log(k);
                console.log(_this.lowest[k]);
                if (score() != _this.lowest[k]) {
                    m += parseFloat(score());
                    count += 1;
                }

            }


        });


        if (count) {
            m = m / count;
            return m.toFixed(2);
        } else {
            return 'N/A';
        }
    });

    for (var i = 0; i < 10; i++) {
        _this.scores.push(ko.observable(i));
    }

    var m = mean();
    alert(m);