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

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()); });

UI 바인딩:




코드 복사

코드는 다음과 같습니다.

; 텍스트 값 변경 ext, 첫 번째 텍스트는 ko 텍스트 메소드이고 두 번째 텍스트는 문자열이어야 하며 context/viewModel의 속성입니다. 따라서 ext의 동적 속성은 ext:{text:'text', value:'text'} 현재:

와 같은 모든 ko 메서드에서 사용할 수 있습니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.