Knockoutjs 빠른 시작(클래식)_기본 지식

Knockoutjs는 JavaScript로 구현된 MVVM 프레임워크입니다. 주로 다음과 같은 기능을 가지고 있습니다:

1. 선언적 바인딩

2. 관찰 가능 항목 및 종속성 추적

3. 템플릿 만들기

프런트엔드 비즈니스 로직과 뷰를 분리하고 데이터 바인딩 프로세스를 단순화하는 데 상당한 효과가 있습니다. 더 이상 고민하지 말고 다운로드 방법에 대해서는 설명하지 않겠습니다. VS를 사용하여 개발하는 경우 Nuget을 사용하여 한 번의 클릭으로 완료할 수 있습니다.

1. 기본 바인딩 및 종속성 추적
먼저 ViewModel을 정의해야 합니다.

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

그런 다음 이 ViewModel을 표시하는 데 사용되는 보기가 있습니다.

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

< input data-bind="value: lastName"/>

이 뷰에서 선언적 바인딩의 의미를 볼 수 있습니다. 라벨에만 사용해야 합니다. data-bind 속성은 데이터 값을 해당 위치에 바인딩할 수 있습니다. View와 ViewModel을 사용하려면 둘을 연결하는 코드가 필요합니다.

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

ko.applyBindings(new ViewModel());

함께 배치하세요. ApplyBinding 코드는 페이지가 완전히 로드된 후에 실행되어야 합니다. 페이지 표시:

다음으로 Observable을 살펴보겠습니다. 이 기능은 View Model을 Observable로 설정해야 합니다.

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

function ViewModel() {
this.firstName = ko.observable("Zixin")
this.lastName = ko .observable(" Yin");
}

이때 입력란의 값을 변경하면 포커스가 벗어나면 찾을 수 있습니다. p의 값도 변경됩니다.

종속성 추적을 살펴보겠습니다. 즉, 값이 여러 값에 종속되고 값 중 하나가 변경되면 자동으로 변경됩니다. 이는 계산된 방법을 통해 달성되며 코드는 다음과 같습니다.

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

function ViewModel() {
이것입니다. firstName = ko.observable("Zixin" );
this.lastName = ko.observable("Yin");
this.fullName = ko.computed(function () { return this.lastName() " " this.firstName(); },this );
}

Observable의 값을 가져오는 것은 함수 호출입니다. 이런 방식으로 이름이나 성이 변경되면 그에 따라 fullName도 자동으로 변경됩니다.

코드를 통해 관찰 가능 항목의 값을 변경할 수도 있으며 페이지가 자동으로 새로 고쳐집니다.

코드를 복사하세요 코드는 다음과 같습니다:

function ViewModel() {
//………
this.capitalizeLastName = function () {
this.lastName(this.lastName() .toUpperCase());
}
}

페이지에 버튼 추가:

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

Caps

버튼을 클릭하면 viewmodel의 capitalizeLastName 메서드가 시작됩니다. Observable의 값을 변경하는 방법은 새 값을 함수 호출의 매개 변수로 사용하는 것입니다. 클릭 후:

2. 리스트 바인딩

다음 순서의 ViewModel로 참여하고 observableArray를 사용하여 배열의 변경 사항을 추적합니다.

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

var products=[{name: "Thinkpad X1", 가격:9000},
{이름:"Hp ProBook", 가격:5555},
{이름:"마우스", 가격:45} ];

function Order() {
var self = this;
self.items = ko.observableArray([
//이 데이터는 서버
new Item(products[0], 1),
new에서 로드되어야 합니다. Item(products [1],2)]);
self.price = ko.computed(function () {
var p=0;
for (var i = 0; i < self. items() .length; i ) {
var item = self.items()[i]
p = item.product.price * item.amount()
}
return p ;
}, self)
}

주문한 항목은 실제로 서버에서 가져와야 합니다.

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

function Item(product, amount) {
var self = this; >this.product = product;
this.amount = ko.observable(amount);
this.subTotal = ko.computed(function () {
return self.amount() * self.product. 가격;
}, self );
}

ViewModel이 준비되면 View를 구현할 수 있습니다. 이번에는 다음과 같이 foreach 바인딩을 사용해야 합니다.

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

<테이블>

금액
< ;td>가격

>

주문 가격:

🎜>

수량을 선택하면 가격이 자동으로 업데이트되는 이와 같은 기본 주문 페이지가 있으면 좋을 것 같습니다.




다음으로, 주문에 제품 추가 및 삭제 기능을 추가하세요. 먼저 주문에 다음 메서드를 추가하세요.

코드 복사

코드는 다음과 같습니다.

function Order() { //… self.remove = function(item) { self.items.remove (항목); }

self.addMouse = function () {
self.items.push(new Item(products[2],1))
}
}



테이블에 열 삭제 버튼 추가
:

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

제거< /td>다시 테이블 하단에 제품을 추가하는 버튼을 추가하세요.

코드 복사

코드는 다음과 같습니다.

< ;button data-bind="click: addMouse">마우스 추가
이때, observableArray의 기능이 반영되어 있어 삭제 버튼이나 하단의 버튼을 누르면 DOM 노드를 수동으로 업데이트할 필요 없이 페이지 노드가 그에 맞게 변경되므로 전면이 크게 단순화됩니다. JS를 종료합니다.