Knockoutjs를 연주 한 사람은 구성 요소라는 강력한 기능이 있다는 것을 알고 있으며,이 구성 요소의 멋진 점 중 하나는 다음과 같은 자체 뷰 모델과 템플릿이 있다는 것입니다.
ko.components.register ( 'message-editor', {viewModel : function () {}, 템플릿 : ""});분명히, ViewModel은 함수 기능 영역이고 템플릿은 템플릿 영역이며 구성 요소는 레지스터 함수를 통해 녹아웃에 등록됩니다. 아래의 간단한 기능을 보여 주겠습니다. 이는 현재 "입력"컨텐츠의 길이 길이를 동적으로 표시하는 것입니다.
<! docType html> <html> <head> <메타 http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "utf-8"/> <script src = "jquery-1.8.2.js"> </script> src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'component : "message-editor"'> </div> <script type = "text/javaScript"> ko.comPonents.register ( 'message-editor', {viewmodel : function (thistext = ko.text | '');}, 템플릿 : '메시지 : <input data-bind = "value : text"/>'+ '(length : <span data-bind = "text (). length"> </span>)'}); ko.applyBindings (); </script> </body> </html>이 코드를 자세히 살펴보십시오. 현재 구성 요소는 템플릿 템플릿을 HTML의 DIV 태그에 주입 하고이 템플릿 태그에서 텍스트 요소의 바인딩도 있으며이 (Text (). length)의 데이터 소스는 ViewModel에서 this.text입니다. ． 오른쪽. . . 이 두 가지의 통합으로 최종 HTML은 다음과 같이 표시됩니다.
다음으로, 우리는 몇 가지 숫자를 자연스럽게 입력하고 마우스를 멀리 옮깁니다. 현재 입력 변경 이벤트가 트리거됩니다.
그렇게 시원하지 않니? ? ? 물론, 어떤 사람들은 입력이 렌더링 될 때 약간의 기본값을 제공하면 어떻게해야합니까? ? ? 괜찮아? 물론 가능합니다. 현재 데이터 바인드에서 기본적으로 값을 할당 할 수 있으며 괜찮습니다. . . 예를 들어 다음은 다음과 같습니다.
<body> <h4> 두 번째 인스턴스, 매개 변수 전달 </h4> <div data-bind = 'component : {name : "message-editor", params : {initialtext : "hello, world!" }} '> </div> <script type = "text/javaScript"> ko.comPonents.register ('message-editor ', {viewModel : function (params) {this.text = ko.observable (params && params.initialtext ||' '), 템플릿 : <입력 데이터-bind : <텍스트-값 : < data-bind = "text : text (). 길이"> </span>) '}); ko.applybindings (); </script> </body>위의 코드에서 구성 요소의 Params 객체에 초기 텍스트 속성을 추가 한 다음 현재이 초기 텍스트를 ViewModel에 동적으로 주입 한 다음 데이터 바인드를 통해이 뷰 모델의 텍스트 모니터링 속성에 입력 및 스팬 요소가 구독 할 수 있습니다. 현재 실시간 업데이트 작업이 발생합니다. 나는 기다릴 수 없다 ~
1 : 문제 분석
좋아, 위의 데모를 통해 다음 두 가지 문제를 발견했을 것입니다. 첫 번째 문제는 그것이 너무 강력하다는 것입니다. 등록하는 한 ApplyBindings를 통해 뷰 모델을 적용 할 필요가 없습니다. 이는 페이지의 모듈화를 깨닫게됩니다.이 문제는 좋은 일입니다. 두 번째 문제는 템플릿 템플릿의 내용이 "하드 코딩 된"형식이라는 것입니다. ? ? 당신이 아무리 능력이 있더라도, 당신은 그들을 하나씩 스플라이킹 할 수 없습니다. 당신이 그들을 스플릿하더라도 유지 보수 비용이 너무 높습니다. 문제는 템플릿 컨텐츠를 동적으로 전환하는 방법입니다. ? ? 예를 들어, 우리가 실제로 볼 수있는 바이두 라이브러리 페이지. . . 아래 그림과 같이 :
이 페이지에는 위의 3 개 모듈과 같은 많은 모듈이 있습니다. 이 세 모듈에는 많은 HTML이 있어야합니다 ~~~
둘 : 템플릿 동적 획득
HTML 컨텐츠를 동적으로 얻는 두 가지 방법이 있습니다. 첫 번째는 요구 사항입니다. 물론, 당신은 그러한 JS를 참조해야합니다. 두 번째는 템플릿을 다시 작성하는 것입니다. 물론이 기사에서는 구성 요소에로드 템플릿 함수를 다시 작성한 다음 기본 부하 로더를 교체하는 것입니다. 매우 간단하지 않습니까? ? ?
1. loadTemplate 방법을 다시 작성하십시오
// 1 단계 :로드 템플릿 메소드 var 템플릿 var 템플릿을 다시 작성합니다. {ko.components.defaultloader.loadTemplate (이름, MarkupString, Callback);});} else {Callback (null);}}}; // 원래 기본 부하기를 교체하고 새 템플릿을 구현하여 새로운 템플릿을 구현합니다.2. 하드 코드를 외부 파일에 넣습니다. 예를 들어 새 File.html 파일을 만들었습니다.
3. 구성 요소를 등록한 다음 다음 {fromurl : 'file.html'}과 같은 템플릿 태그의 외부 파일 경로를 참조하십시오.
ko.comPonents.register ( 'message-editor', {viewModel : function (params) {this.text = ko.observable (params && params.initialText || ''), 템플릿 : {fromurl : 'file.html'},});좋아, 모든 기능이 준비되었습니다. 페이지를 탐색하여 어떻게 생겼는지 확인해 봅시다. ? ?
마지막으로, 위대한 작업이 이루어졌습니다. 맞습니까? 그런 다음 위에서 소개 된 "바이두 라이브러리"의 예로 확장 할 수 있습니다. 각 모듈의 HTML을 별도의 파일에 넣을 수 있습니다.
<! docType html> <html> <head> <메타 http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "utf-8"/> <script src = "jquery-1.8.2.js"> </script> src = "knockoutjs.js"> </script> </head> <body> <body> <div data-bind = 'component : {name : "message-editor", params : {initialtext : "hello !!!" }} '> </div> <script type = "text/javaScript"> // 1 단계 :로드 템플릿 메소드를 다시 작성합니다. var emplate fromurlloader = {loadTemplate : function (name, templateconfig, callback) {if (templateconfig.fromurl) {var fullurl ='/' + emplateconfig. 외부 파일 내용 $ .get (fullUrl, function (markUpString) {ko.comPonents.defaultloader.loadTemplate (이름, markUpstring, Callback);});} else {Callback (null);}}}; // 원래 기본 부하기를 교체하고 새 구현 templatefromurlloaderko.components.loaders.unshift (templatefromurlloader); ko.components.register ( 'message-editor', {viewmodel : function (params) {this.text = ko.observable (params && params.initialtext || ''); },}); ko.applybindings (); </script> </body> </html>위는 구성 요소에서 템플릿 데이터 소스의 구현 방법으로 Knockoutjs에서 외부 파일을 동적으로로드하는 방법입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!