[英]Accept decimal places in KO numeric extension
我已經實現了 Knockout live 1 示例中顯示的擴展器 - https://knockoutjs.com/documentation/extenders.html
ko.extenders.precision = function (target, precision) {
//create a writable computed observable to intercept writes to our observable
var result = ko
.pureComputed({
read: target, //always return the original observables value
write: function (newValue) {
var current = target(),
roundingMultiplier = Math.pow(10, precision),
newValueAsNum = isNaN(newValue) ? 0 : +newValue,
valueToWrite =
Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;
//only write if it changed
if (valueToWrite !== current) {
target(valueToWrite);
} else {
//if the rounded value is the same, but a different value was written, force a notification for the current field
if (newValue !== current) {
target.notifySubscribers(valueToWrite);
}
}
},
})
.extend({ notify: "always" });
//initialize with current value to make sure it is rounded appropriately
result(target());
//return the new computed observable
return result;
};
model視圖如下:
model.gwaioDifficultySettings = {
minionMod: ko.observable(0).extend({
precision: 3,
rateLimit: { timeout: 500, method: "notifyWhenChangesStop" },
}),
};
它可以通過 HTML 輸入字段訪問:
<div>
<input
type="number"
style="width: 50px; padding-bottom: 0px;"
data-bind="textInput: model.gwaioDifficultySettings.minionMod"
/>
<span style="margin-left: 6px;"></span>
<loc>Minion Modifier</loc>
<span
class="info_tip"
data-bind="tooltip: '!LOC:Mandatory Minions + Star Distance * Minion Modifier = number of additional enemy Commanders.'"
>?</span
>
</div>
但是,我必須添加rateLimit: { timeout: 500, method: "notifyWhenChangesStop" }
,否則我發現一旦值為 integer,該字段將刪除小數點,然后它將阻止任何嘗試輸入又是小數點。
在實際示例中似乎並非如此,我想知道我哪里出錯了,或者僅僅是因為我使用 Knockout 3 和 Chromium 28 的環境。
我將https://gist.github.com/gnab/7579584中的一些代碼添加到我的擴展器中:
if (_.isString(newValue)) {
newValue = newValue.replace(",", ".");
newValue = parseFloat(newValue);
if (!isNaN(newValue)) {
target(newValue);
}
}
這導致:
ko.extenders.precision = function (target, precision) {
//create a writable computed observable to intercept writes to our observable
var result = ko
.pureComputed({
read: target, //always return the original observables value
write: function (newValue) {
if (_.isString(newValue)) {
newValue = newValue.replace(",", ".");
newValue = parseFloat(newValue);
if (!isNaN(newValue)) {
target(newValue);
}
}
var current = target(),
roundingMultiplier = Math.pow(10, precision),
newValueAsNum = isNaN(newValue) ? 0 : +newValue,
valueToWrite =
Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;
//only write if it changed
if (valueToWrite !== current) {
target(valueToWrite);
} else {
//if the rounded value is the same, but a different value was written, force a notification for the current field
if (newValue !== current) {
target.notifySubscribers(valueToWrite);
}
}
},
})
.extend({ notify: "always" });
//initialize with current value to make sure it is rounded appropriately
result(target());
//return the new computed observable
return result;
};
到目前為止,在我所有的測試中,這似乎都按要求執行。 如果輸入一個小數點,它會留下一個可見的懸掛小數點,但這似乎不會產生任何負面影響。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.