Knockout.js将数字转换为字符串
问题描述:
我试图做一个简单的时间表演示,我遇到了一些与我计算的observables问题,它坚持把我的数字转换为字符串并连接它们而不是添加它们。 JavaScript不是我的专长。Knockout.js将数字转换为字符串
的代码是:
var ViewModel = function() {
self = this;
this.RegSun = ko.observable(0);
this.RegMon = ko.observable(0);
this.RegTue = ko.observable(0);
this.RegWed = ko.observable(0);
this.RegThu = ko.observable(0);
this.RegFri = ko.observable(0);
this.RegSat = ko.observable(0);
this.HolSun = ko.observable(0);
this.HolMon = ko.observable(0);
this.HolTue = ko.observable(0);
this.HolWed = ko.observable(0);
this.HolThu = ko.observable(0);
this.HolFri = ko.observable(0);
this.HolSat = ko.observable(0);
this.RegSun.extend({ required: true, min: 0, max: 24 });
this.RegMon.extend({ required: true, min: 0, max: 24 });
this.RegTue.extend({ required: true, min: 0, max: 24 });
this.RegWed.extend({ required: true, min: 0, max: 24 });
this.RegThu.extend({ required: true, min: 0, max: 24 });
this.RegFri.extend({ required: true, min: 0, max: 24 });
this.RegSat.extend({ required: true, min: 0, max: 24 });
this.HolSun.extend({ required: true, min: 0, max: 24 });
this.HolMon.extend({ required: true, min: 0, max: 24 });
this.HolTue.extend({ required: true, min: 0, max: 24 });
this.HolWed.extend({ required: true, min: 0, max: 24 });
this.HolThu.extend({ required: true, min: 0, max: 24 });
this.HolFri.extend({ required: true, min: 0, max: 24 });
this.HolSat.extend({ required: true, min: 0, max: 24 });
this.RegTot = ko.computed(function() {
return self.RegSun() + self.RegMon() + self.RegTue() + self.RegWed() + self.RegThu() + self.RegFri() + self.RegSat();
});
this.HolTot = ko.computed(function() {
return self.HolSun() + self.HolMon() + self.HolTue() + self.HolWed() + self.HolThu() + self.HolFri() + self.HolSat();
});
this.TotSun = ko.computed(function() {
return self.RegSun() + self.HolSun();
});
this.TotMon = ko.computed(function() {
return self.RegMon() + self.HolMon();
});
this.TotTue = ko.computed(function() {
return self.RegTue() + self.HolTue();
});
this.TotWed = ko.computed(function() {
return self.RegWed() + self.HolWed();
});
this.TotThu = ko.computed(function() {
return self.RegThu() + self.HolThu();
});
this.TotFri = ko.computed(function() {
return self.RegFri() + self.HolFri();
});
this.TotSat = ko.computed(function() {
return self.RegSat() + self.HolSat();
});
this.TotTot = ko.computed(function() {
return self.RegTot() + self.HolTot();
});
};
和HTML是:
<table class="workspacetable">
<thead><tr><th> </th><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Total</th></tr></thead>
<tr><td>Regular</td><td><input type="text" data-bind="value: RegSun" class="timesheethours" /></td><td><input type="text" data-bind="value: RegMon" class="timesheethours" /></td><td><input type="text" data-bind="value: RegTue" class="timesheethours" /></td><td><input type="text" data-bind="value: RegWed" class="timesheethours" /></td><td><input type="text" data-bind="value: RegThu" class="timesheethours" /></td><td><input type="text" data-bind="value: RegFri" class="timesheethours" /></td><td><input type="text" data-bind="value: RegSat" class="timesheethours" /></td><td><span data-bind="text: Number(RegTot())"> </span></td></tr>
<tr><td>Holiday</td><td><input type="text" data-bind="value: HolSun" class="timesheethours" /></td><td><input type="text" data-bind="value: HolMon" class="timesheethours" /></td><td><input type="text" data-bind="value: HolTue" class="timesheethours" /></td><td><input type="text" data-bind="value: HolWed" class="timesheethours" /></td><td><input type="text" data-bind="value: HolThu" class="timesheethours" /></td><td><input type="text" data-bind="value: HolFri" class="timesheethours" /></td><td><input type="text" data-bind="value: HolSat" class="timesheethours" /></td><td><span data-bind="text: HolTot"> </span></td></tr>
<tr><td><b>Total</b></td><td><span data-bind="text: TotSun"> </span></td><td><span data-bind="text: TotMon"> </span></td><td><span data-bind="text: TotTue"> </span></td><td><span data-bind="text: TotWed"> </span></td><td><span data-bind="text: TotThu"> </span></td><td><span data-bind="text: TotFri"> </span></td><td><span data-bind="text: TotSat"> </span></td><td><span data-bind="text: TotTot"> </span></td></tr>
</table>
我有一个小提琴here
如果您在小提琴的日期的一个输入值,问题应该立即显现。当然,我错过了一些简单的事情。
答
它们是字符串,因为它们绑定到带字符串的文本框。你需要将它们转换回数字。例如:
this.TotSun = ko.computed(function() {
return parseInt(self.RegSun(),10) + parseInt(self.HolSun(),10);
});
请参阅parseInt。注意:如果您需要支持浮点值,请查看parseFloat
。
但是@BenjaminGruenbaum在评论中说,你真的需要学习使用数组。
圣代码重复皮特。你有没有考虑过使用数组? – 2014-11-06 20:24:02
@BenjaminGruenbaum我提到它是一个演示?我可能不会在真实系统中以这种方式实现它。但实际上,在VS.NET的列编辑中,这样做是一件小事。 – Pete 2014-11-06 20:27:28
即使是一个“演示”,我也会在这一张上使用@BenjaminGruenbaum。这种重复只会伤害我的眼睛。如果你试图正确地做,你会学到更多。 – 2014-11-06 20:30:15