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>&nbsp;</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())">&nbsp;</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">&nbsp;</span></td></tr> 
    <tr><td><b>Total</b></td><td><span data-bind="text: TotSun">&nbsp;</span></td><td><span data-bind="text: TotMon">&nbsp;</span></td><td><span data-bind="text: TotTue">&nbsp;</span></td><td><span data-bind="text: TotWed">&nbsp;</span></td><td><span data-bind="text: TotThu">&nbsp;</span></td><td><span data-bind="text: TotFri">&nbsp;</span></td><td><span data-bind="text: TotSat">&nbsp;</span></td><td><span data-bind="text: TotTot">&nbsp;</span></td></tr> 
</table>

我有一個小提琴here

如果您在小提琴的日期的一個輸入值，問題應該立即顯現。當然，我錯過了一些簡單的事情。

來源

2014-11-06 Pete

聖代碼重複皮特。你有沒有考慮過使用數組？ – 2014-11-06 20:24:02

@BenjaminGruenbaum我提到它是一個演示？我可能不會在真實系統中以這種方式實現它。但實際上，在VS.NET的列編輯中，這樣做是一件小事。 – Pete 2014-11-06 20:27:28

即使是一個「演示」，我也會在這一張上使用@BenjaminGruenbaum。這種重複只會傷害我的眼睛。如果你試圖正確地做，你會學到更多。 – 2014-11-06 20:30:15

它們是字符串，因爲它們綁定到帶字符串的文本框。你需要將它們轉換回數字。例如：

this.TotSun = ko.computed(function() { 
    return parseInt(self.RegSun(),10) + parseInt(self.HolSun(),10); 
});

請參閱parseInt。注意：如果您需要支持浮點值，請查看parseFloat。

但是@BenjaminGruenbaum在評論中說，你真的需要學習使用數組。

來源

2014-11-06 20:28:28

Knockout.js將數字轉換爲字符串

回答

相關問題