Knockout array 사용 상세예(관측가능)_기본지식

< script type="text/javascript"> var myObservableArray = ko.observableArray(); ///빈 배열 초기화
myObservableArray.push("Some Value"); array 항목

2. 요점: 모니터링 어레이는 객체 자체의 상태가 아닌 어레이에 있는 객체를 추적합니다. 간단히 말하면, observableArray에 객체를 배치해도 객체 자체의 속성 변경이 모니터링 가능하지는 않습니다. 물론 이 개체의 속성을 관찰 가능으로 선언할 수도 있지만 종속성 모니터링 개체가 됩니다. observableArray는 단순히 자신이 소유한 객체를 모니터링하고 이러한 객체가 추가되거나 제거될 때 이를 알립니다.

3. 모니터링 배열 observableArray를 미리 로드합니다

모니터링 배열이 처음에 일부 초기 값을 가지도록 하려면 이를 선언할 때 생성자에 추가하면 됩니다. 초기 개체. 예:

코드 복사

코드는 다음과 같습니다.
var anotherObservableArray = ko.observableArray ([
{이름: "bungle", 유형: "bear"}, {name: "george", 유형: "hippo"},
{name: "zippy", 유형: "unknown " 🎜 > ]);

4. observableArray에서 정보 읽기observableArray는 실제로 관찰 가능한 모니터링 객체이지만 값은 배열입니다(observableArray). 기타 많은 기능 추가되었으니 추후 소개하겠습니다.) 따라서 매개변수 없는 함수를 호출하여 일반 Observable의 값을 얻는 것처럼 고유한 값을 얻을 수 있습니다. 예를 들어 다음과 같이 값을 얻을 수 있습니다.

코드 복사


코드는 다음과 같습니다.

Alert('배열의 길이는 ' myObservableArray().length);alert('첫 번째 요소는 ' myObservableArray()[0]);

이론적으로는 사용할 수 있습니다. 모든 기본 JavaScript 배열 함수를 사용하여 이러한 배열을 조작할 수 있지만 KO는 다음과 같은 이유로 더 나은 기능적 동등성을 제공합니다.

답: 모든 브라우저와 호환됩니다. (예를 들어 indexOf는 IE8 이하 버전에서는 사용할 수 없지만 KO 자체 indexOf는 모든 브라우저에서 사용할 수 있습니다.) B: 배열 연산 기능(push, splice 등) 측면에서 KO 자체 메소드가 자동으로 트리거될 수 있습니다. 종속성 모든 구독자에게 변경 사항을 추적하고 알리고 이에 따라 UI 인터페이스가 자동으로 업데이트되도록 합니다. C: KO의 push 메소드를 호출하려면 myObservableArray.push(...)와 같이 작성하면 됩니다. 예를 들어 기본 배열의 경우 myObservableArray().push(...)를 사용하는 것이 훨씬 쉽습니다. 5.IndexOf 및 슬라이스indexOf 함수는 매개변수 배열 항목과 동일한 첫 번째 인덱스를 반환합니다. 예를 들어, myObservableArray.indexOf('Blah')는 첫 번째 인덱스가 0인 Blah와 동일한 첫 번째 배열 항목의 인덱스를 반환합니다. 동일한 항목이 없으면 -1이 반환됩니다. ​

슬라이스 함수는 JavaScript 기본 함수 슬라이스(시작 인덱스에서 끝 인덱스까지 모든 개체의 지정된 컬렉션을 반환)와 관련하여 observableArray와 동등한 함수입니다. myObservableArray.slice(...)를 호출하는 것은 JavaScript 기본 함수(예: myObservableArray().slice(...))를 호출하는 것과 동일합니다.

6. observableArray 작동

observableArray는 배열 객체와 유사한 기능을 보여주고 구독자에게 알립니다.

pop, push, Shift, unshift, reverse, sort, splice
이러한 모든 기능은 JavaScript 배열 기본 기능과 동일합니다. 유일한 차이점은 배열 변경 사항이 구독자에게 알릴 수 있다는 것입니다.



코드 복사

코드는 다음과 같습니다.

myObservableArray.push('Some new value');//새 값 추가 배열의 끝 ItemmyObservableArray.pop(); // 배열의 마지막 항목을 삭제하고 반환합니다.
myObservableArray.unshift('Some new value') // 항목의 선두에 추가합니다. 배열
myObservableArray.shift ();// 배열의 선두에 있는 첫 번째 항목을 삭제하고 반환합니다
myObservableArray.reverse();// 전체 배열의 순서를 반대로 바꿉니다

myObservableArray.sort ();// 배열 정렬
기본적으로 문자(문자인 경우) 또는 숫자(숫자인 경우)로 정렬됩니다.
정렬 함수를 전달하여 정렬할 수 있습니다(배열에서 비교해야 하는 항목을 나타냄). 이며, 1보다 큰 경우 1을 반환하는 것은 0을 반환하는 것과 같습니다. 예를 들어, 성을 기준으로 사람을 정렬하려면 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

myObservableArray.sort(
function(left, right) {
return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1 );
} );

myObservableArray.splice()는 지정된 시작 인덱스와 지정된 개수의 배열 객체 요소를 삭제합니다. 예를 들어 myObservableArray.splice(1, 3)은 인덱스 1부터 시작하여 3개의 요소(2번째, 3번째, 4번째 요소)를 제거하고 이러한 요소를 배열 객체로 반환합니다.
observableArray 함수에 대한 자세한 내용은 해당 JavaScript 배열 표준 함수를 참조하세요.
7.remove 및removeAll

코드 복사 코드는 다음과 같습니다.

observableArray 추가된 일부 JavaScript 배열에는 기본값은 없지만 매우 유용한 함수가 있습니다:
myObservableArray.remove(someItem);// someItem과 동일한 모든 요소를 ​​제거하고 삭제된 요소를 배열로 반환
myObservableArray.remove(function (item) ) { return item.age < 18;}) ;//age 속성이 18 미만인 모든 요소를 ​​삭제하고 삭제된 요소를 배열로 반환