Question

刚开始使用淘汰赛和javascript。我坚持设置对象monthData的mPrice值。

function monthData(mYear, mMonth, mSS, mMs, mLimit, mPerItem, mStartingPrice) {
    var self = this;
    self.mYear= mYear;
    self.mMonth = mMonth;
    self.mSs = mSS;
    self.mMs = mMs;
    self.mTotal = mSS + mMs;
    self.mLimit = mLimit;
    self.mPerItem = mPerItem;
    self.mStartingPrice = mStartingPrice;
};

这是停止工作的。如果我设置self.mPrice = 0，我将至少打印出所有月份。

 self.mPrice = ko.computed(function() {
    var limit = self.mLimit;
    var perItem = self.mPerItem;
    var startingPrice = self.mStartingPrice;
    var total = self.mTotal;
    if (total <= limit) {
        return startingPrice;
    } else {
    var aboveLimit = total - limit;
    var extra = aboveLimit * perItem;
    return startingPrice + extra;
    }
});

}

function statViewModel() {
this.tak = ko.observable(100);
this.styckpris = ko.observable(10);
this.grundpris = ko.observable(500);
var self = this;

// testing with some months
self.allMonths = ko.observableArray([
    new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris),
    new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris),
    new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris),
    new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris),
    new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris)       
]);    
}

- 编辑：就在我发布之后，我发现了一个失踪的paranteses。现在我把它打印出来但它说：

function d(){if(0<arguments.length){if(!d.equalityComparer||!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return this}b.r.Va(d);return c}NaN

HTML：

<p>Tak: <input data-bind="value: tak" /></p>
<p>Styckpris: <input data-bind="value: styckpris" /></p>
<p>Grundpris: <input data-bind="value: grundpris" /></p>

<table>
<thead>
    <tr>
    <th>År</th><th>Månad</th><th>SS</th><th>MS</th><th>Total</th><th>Pris</th>
    </tr>
</thead>
<tbody data-bind="foreach: allMonths">
    <tr>
        <td><span data-bind="text: mYear"></span></td>
        <td><span data-bind="text: mMonth"></span></td>
        <td><span data-bind="text: mSs"></span></td>
        <td><span data-bind="text: mMs"></span></td>
        <td><span data-bind="text: mTotal"></span></td>
        <td><span data-bind="text: mPrice"></span></td>        
    </tr>
</tbody>
</table>

Answer 1

仅使用observableArray'要求'淘汰'观察'数组功能 - 即push，移除，移动项目等......

要“敲击”探测观察该阵列中的物体，你实际上是想让它观察物体的特定属性。

因此，您的monthData对象应该声明observable而不是常规/原始属性：

function monthData(mYear, mMonth, mSS, mMs, mLimit, mPerItem, mStartingPrice) {

    var self = this;
    self.mYear = mYear;
    self.mMonth = mMonth;
    self.mSs = mSS;
    self.mMs = mMs;
    self.mTotal = ko.observable( mSS + mMs );
    self.mLimit = ko.observable( mLimit );
    self.mPerItem = ko.observable( mPerItem );
    self.mStartingPrice = ko.observable( mStartingPrice );

    ...

}

注意，我只选择了最后4个为observable，因为这些是您在computed中使用的属性。现在它们是observable，computed会知道在其中任何一个发生变化时会重新评估。

此外，如果您希望self.mTotal自动更新（例如，如果您希望更改self.mSs或self.mSm），则需要computed而不是observable ()。

修改

不要忘记使用self.mPrice = ko.computed(function() { var limit = self.mLimit(); var perItem = self.mPerItem(); var startingPrice = self.mStartingPrice(); var total = self.mTotal(); if (total <= limit) { return startingPrice; } else { var aboveLimit = total - limit; var extra = aboveLimit * perItem; return startingPrice + extra; } });附加对这些变量的任何引用。您的计算现在应该如下所示：

tak

编辑2：

抱歉没有正确阅读问题。

我没有意识到你正在传递styckpris，grundpris和monthData - 当我看到另一种语言时，我的大脑可能已经关闭：p

问题

因此，将这些内容传递给monthData构造函数时，您所做的就是取消引用。你已经传递了observable背后的值而不是传递了observable。通过传递值，您的mPrice构造函数以及计算出的function monthData(mYear, mMonth, mSS, mMs, mLimit, mPerItem, mStartingPrice) { var self = this; self.mYear= mYear; self.mMonth = mMonth; self.mSs = mSS; self.mMs = mMs; self.mTotal = mSS + mMs; /* Remember that these are observable! */ self.mLimit = mLimit; self.mPerItem = mPerItem; self.mStartingPrice = mStartingPrice; self.mPrice = ko.computed(function() { /* So, remember to dereference them! */ var limit = self.mLimit(); var perItem = self.mPerItem(); var startingPrice = self.mStartingPrice(); var total = self.mTotal; if (total <= limit) { return startingPrice; } else { var aboveLimit = total - limit; var extra = aboveLimit * perItem; return startingPrice + extra; } }); } function statViewModel() { this.tak = ko.observable(100); this.styckpris = ko.observable(10); this.grundpris = ko.observable(500); var self = this; // testing with some months self.allMonths = ko.observableArray([ new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris), new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris), new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris), new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris), new monthData(2013, 1, 412, 142, this.tak, this.styckpris, this.grundpris) ]); }将无法看到对observable的更改。

解决方案

将observable传递给构造函数，而不取消引用它们。

{{1}}

Answer 2

编辑 - 现在正在按照我想要的方式工作

function monthData(mYear, mMonth, mSS, mMs, parent) {
var self = this;
self.mYear = mYear;
self.mMonth = mMonth;
self.mSs = mSS;
self.mMs = mMs;
self.mTotal = mSS + mMs;

self.mPrice = ko.computed(function () {
    var limit = parent.tak();
    var perItem = parent.styckpris();
    var startingPrice = parent.grundpris();
    var total = self.mTotal;
    if (total <= limit) {
        return startingPrice;
    } else {
        var aboveLimit = total - limit;
        var extra = aboveLimit * perItem;
        var sum = parseInt(startingPrice) + parseInt(extra);
        return sum;
    }
});
}

function statViewModel() {
var self = this;

self.tak = ko.observable(100);
self.styckpris = ko.observable(10);
self.grundpris = ko.observable(500);

// testing with some months
self.allMonths = ko.observableArray([
new monthData(2013, 1, 412, 142, self),
new monthData(2013, 2, 112, 642, self),              
new monthData(2013, 2, 100, 742, self),
new monthData(2013, 3, 6513, 69, self),
new monthData(2013, 4, 34, 211, self),
new monthData(2013, 5, 123, 435, self),
new monthData(2013, 6, 412, 142, self),
new monthData(2013, 7, 412, 142, self)

]);
}

// Activates knockout.js
ko.applyBindings(new statViewModel());

Answer 3

请忽略我的其他答案。我对原始问题中的代码与您发布的答案感到困惑。所以我的解释不清楚。所以我在这里回答您的问题，而不是使用回答中的任何内容。

您收到的错误

function d(){if(0<arguments.length){if(!d.equalityComparer||!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return this}b.r.Va(d);return c}NaN

可以简化为

<ko.observable>NaN

可以理解为：“一个可观察的不是数字”

这表明您正在尝试对可观察的数据执行数学运算。

在if声明中，您有：if(total <= limit)。您无法比较数字（total）是否小于或等于（<=）可观察的（limit）。您必须通过将其称为函数来获取limit的值。

你的计算版现在应该是这样的：

self.mPrice = ko.computed(function() {
    var limit = self.mLimit();
    var perItem = self.mPerItem();
    var startingPrice = self.mStartingPrice();
    var total = self.mTotal;
    if (total <= limit) {
        return startingPrice;
    } else {
        var aboveLimit = total - limit;
        var extra = aboveLimit * perItem;
        return startingPrice + extra;
    }
});

只有前三行需要改变 - 这方面的细微变化。没别了。

使用带有if语句的ko.computed来设置对象的observable属性

3 个答案: