ノックアウト ビュー モデルに観察可能な名前フィールドがあります。特定の数を超える場合、このフィールドの文字数を制限したいと思います。
name = "john smith" で、6 文字に制限されている場合、
" john s... " と表示されます。
ノックアウト ビュー モデルに観察可能な名前フィールドがあります。特定の数を超える場合、このフィールドの文字数を制限したいと思います。
name = "john smith" で、6 文字に制限されている場合、
" john s... " と表示されます。
もう 1 つの再利用可能な解決策は、テキストのトリミングされたバージョンを表示するカスタム バインディングを作成することです。
これにより、基になる値は影響を受けずに残りますが、表示のためにテキストがトリミングされます。これは、メッセージのプレビューのようなものや、データをグリッド列に合わせるのに役立ちます。
バインディングの例:
ko.bindingHandlers.trimLengthText = {};
ko.bindingHandlers.trimText = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var trimmedText = ko.computed(function () {
var untrimmedText = ko.utils.unwrapObservable(valueAccessor());
var defaultMaxLength = 20;
var minLength = 5;
var maxLength = ko.utils.unwrapObservable(allBindingsAccessor().trimTextLength) || defaultMaxLength;
if (maxLength < minLength) maxLength = minLength;
var text = untrimmedText.length > maxLength ? untrimmedText.substring(0, maxLength - 1) + '...' : untrimmedText;
return text;
});
ko.applyBindingsToNode(element, {
text: trimmedText
}, viewModel);
return {
controlsDescendantBindings: true
};
}
};
次のように使用します。
<div data-bind="trimText: myText1"></div>
また...
<div data-bind="trimText: myText1, trimTextLength: 10"></div>
Chris Dixon のソリューションは、最大長のフィールドが 1 つある場合に最適です。しかし、この操作を何度も繰り返さなければならない場合は面倒です。その場合は、次のように、カスタムの観察可能なエクステンダーを作成する必要があります。
ko.extenders.maxLength = function(target, maxLength) {
//create a writeable computed observable to intercept writes to our observable
var result = ko.computed({
read: target, //always return the original observables value
write: function(newValue) {
var current = target(),
valueToWrite = newValue ? newValue.substring(0, Math.min(newValue.length, maxLength)) : null;
//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);
}
}
}
});
//initialize with current value to make sure it is rounded appropriately
result(target());
//return the new computed observable
return result;
};
その後、任意のオブザーバブルで使用でき、それらのいずれにも異なる最大長を指定できます。これにより、HTML から煩雑さがなくなり (解決策 1)、計算されたオブザーバブルを記述する必要がなくなります (解決策 2)。次の方法でオブザーバブルを定義するだけです。
this.shortName = ko.observable().extend({ maxLength: 25 });
数値入力の値を切り捨てたい場合は、次のように値を切り捨てるエクステンダーを使用できます。
ko.extenders.truncateValue = function(target, option) {
target.subscribe(function (newValue) {
if(newValue.length > option){
target(newValue.substring(0,option));
}
});
return target;
};
次に、エクステンダーをオブザーバブルに追加するカスタム バインディングを作成します。
ko.bindingHandlers.maxLength = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
'use strict';
var maxlength = element.getAttribute("maxlength");
valueAccessor().extend({truncateValue: maxlength })
ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel);
}
};
HTML で、次のように maxLength バインディングを適用します。
<input type="number" data-bind="maxLength: yourObservable" maxlength="9"></input>