ko knockoutjs 동적 속성 바인딩 기술 application_javascript 기술-JS 튜토리얼-php.cn

ko knockoutjs 동적 속성 바인딩 기술 application_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:48:10

원래의

1618명이 탐색했습니다.

Knockoutjs는 ko로 축약됩니다
Ko의 동적 속성은 ViewModel에서는 불확실하지만 나중에 필요하게 되는 속성을 말합니다.
불확실한 속성이란 무엇입니까? 예를 들어 ListModel이 항목을 편집하는 경우 이 항목의 상태를 편집으로 변경하려고 합니다. 데이터에는 Edit 속성이 포함되지 않습니다. mvvm이 바인딩되면 오류가 보고됩니다.
그러면 목표를 달성하려면 ko를 확장해야 합니다.
먼저 가치 있는 속성 바인딩과 가치 없는 속성 바인딩을 이해해 봅시다:
1. 가치 있는 속성 바인딩:
JS 모델:

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

 
$(function () { 
var viewModel = function () { 
var self = this ; 
self.text = ko.observable(1); 
ko.applyBindings(new viewModel()) 
}); : 

코드 복사

코드는 다음과 같습니다.

렌더링:

2. 값이 없는 속성 바인딩
:

JS 모델:

코드 복사

코드는 다음과 같습니다. $(function () { var viewModel = function () {

var self = this;

self.text = ko.observable() 
ko.applyBindings(new viewModel()) 
}) ; 

 
물론 텍스트는 일반적인 값 유형이며, 값이 아닌 속성 바인딩과 사용법은 동일합니다. 다음과 함께 사용: 
UI 바인딩: 

코드 복사

코드는 다음과 같습니다.

3. 동적 속성 바인딩:

 동적 속성 바인딩이면 속성 자체가 불확실하므로 ko 메서드를 사용하여 구현하기가 어렵습니다. 
JS 확장: 

코드 복사

코드는 다음과 같습니다.

//찾는 중 연기를 통해 Q:397386036 ko.boundHandlers.ext = { update: function (element, valueAccessor, allBindingsAccessor, viewModel, 바인딩Context) { var value = ko.utils.unwrapObservable(valueAccessor()) ; for (값의 var 핸들러) {

if (value.hasOwnProperty(handler)) {

if (typeof viewModel[value[handler]] == 'undefine') { 
viewModel[ value[handler ]] = ko.observable(); 
} 
ko.bindingHandlers[handler].update(element, function () { return viewModel[value[handler]]; }); 
 } 
} 
}; 

 
JS 모델: 




코드 복사

코드는 다음과 같습니다.

$(function () { var viewModel = function () { }; ko.applyBindings(new viewModel()); });