이 요소 포함 (계산 된 필드 참고) fullNumber
var NumberField = function () {
var self = this;
self.maskFormat = "0";
self.firstNumber = ko.observable("");
self.secondNumber = ko.observable("");
self.thirdNumber = ko.observable("");
self.fourthNumber = ko.observable("");
self.fifthNumber = ko.observable("");
self.fullNumber = ko.pureComputed(function() {
return [
self.firstNumber,
self.secondNumber,
self.thirdNumber,
self.fourthNumber,
self.fifthNumber ].map(ko.unwrap);
}
}
그런 다음 다음과 같이 사용합니다.
<div class="numberFields" data-bind="with: numbers">
<input id="0" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: firstNumber, maxNumber: 68">
<input id="1" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: secondNumber, maxNumber: 68">
<input id="2" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: thirdNumber, maxNumber: 68">
<input id="3" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: fourthNumber, maxNumber: 68">
<input id="4" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: fifthNumber, maxNumber: 68">
</div>
중복 된 값이 없는지 어떻게 확인할 수 fullNumber있습니까?
계산에서 map숫자에 대한 모든 종류의 함수를 연결할 수 있습니다 . 기본적으로 다음 세 가지를 수행합니다.
observable하여 에서 로 이동 ,Numberko.unwrapnull이나 undefined값 이 없는지 확인하십시오.일반 자바 스크립트에서 일부 "최신"기능 ( Array.from, Set) :
var uniques = function(arr) {
// There are many implementations of a unique method.
// google/search for `unique js values` to learn more
return Array.from(new Set(arr));
};
var arrUnwrap = function(arr) {
return arr.map(ko.unwrap);
};
var truethyValues = function(arr) {
return arr.filter(function(val) {
return val;
});
};
var NumberField = function () {
var self = this;
self.maskFormat = "0";
self.firstNumber = ko.observable("");
self.secondNumber = ko.observable("");
self.thirdNumber = ko.observable("");
self.fourthNumber = ko.observable("");
self.fifthNumber = ko.observable("");
var numbers = [
self.firstNumber,
self.secondNumber,
self.thirdNumber,
self.fourthNumber,
self.fifthNumber ];
// Read from right to left:
// fullNumber is: unwrapped, unique, truethy numbers
self.fullNumber = ko.pureComputed(function() {
return truethyValues(uniques(arrUnwrap(numbers)));
});
}
ko.applyBindings(new NumberField());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<input data-bind="textInput: firstNumber">
<input data-bind="textInput: secondNumber">
<input data-bind="textInput: thirdNumber">
<input data-bind="textInput: fourthNumber">
<input data-bind="textInput: fifthNumber">
</div>
<h1 data-bind="text: fullNumber"></h1>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다