1

刚刚开始使用淘汰赛和 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>
4

3 回答 3

3

使用observableArray仅“询问”剔除来“观察”数组功能 - 即pushing、移除、移动项目等......

要“要求”敲除以观察该数组中的对象，您实际上希望它观察对象的特定属性。

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

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 个作为observables，因为这些是您在computed. 既然他们愿意observable在computed其中任何一个发生变化时重新评估。

此外，如果您希望self.mTotal自动更新（即，如果您希望self.mSs或self.mSm更改），那将需要是 acomputed而不是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;
    }
});

编辑2：

抱歉没有正确阅读问题。

我没有意识到你正在路过tak，styckpris而且grundpris- 当它看到另一种语言时，我的大脑可能已经关闭了：p

问题

monthData因此，将这些传递给构造函数时您所做的就是取消引用它们。您已经传递了可观察对象背后的值，而不是传递可观察对象。通过传递该值，您的monthData构造函数以及您的mPrice计算函数将无法看到对可观察对象的更改。

解决方案

将 observables 传递到您的构造函数中而不取消引用它们。

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)       
    ]);    

}
于 2013-05-16T12:55:23.627 回答
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());
于 2013-05-16T12:06:45.987 回答
2

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

您收到的错误

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

并且可以读作：“可观察的不是数字”

这表明您正在尝试对 observable 执行数学运算。

在您的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;
    }
});

只有前 3 行需要更改 - 细微的更改。没有其他的。

于 2013-05-17T11:22:55.887 回答