이전 기사에서는 부트 스트랩 가능한 및 녹아웃의 조합을 소개하여 추가, 삭제, 수정 및 검색 기능을 구현하고 [1], Knockout.js의 기본 사용법을 도입했습니다. 다음 으로이 기사를 통해 계속 소개합니다. KO를 사용하여 프로젝트를 수행 할 계획이라면 살펴 보겠습니다.
Bootstrap은 프론트 엔드 프레임 워크이며 웹 개발자를 자유롭게하는 데 좋은 것입니다. UI는 매우 고급, 대기 및 고급임을 보여줍니다. 이론적으로는 CSS 라인을 쓸 필요가 없습니다. 태그에 적절한 속성을 추가하십시오.
Knockoutjs는 JavaScript에서 구현 된 MVVM 프레임 워크입니다. 매우 좋은. 예를 들어, 목록 데이터 항목을 추가하거나 줄인 후에 전체 컨트롤 조각을 새로 고치거나 JS 추가 및 삭제 노드를 직접 작성할 필요가 없습니다. 구문 정의를 충족하는 템플릿과 속성 만 정의하십시오. 간단히 말해서, 우리는 데이터에 대한 액세스에만주의를 기울이면됩니다.
1. 효과의 미리보기
실제로, 그것은 효과가 없습니다. 간단한 추가, 삭제, 수정 및 검색 일뿐입니다. 키는 여전히 코드에 있습니다. KO를 사용하면 많은 인터페이스 DOM 데이터 바인딩 작업을 저장할 수 있습니다. 아래는 추가, 삭제, 수정 및 검색의 전체 논리에 대한 JS 코드입니다.
페이지 효과 :
2. 코드 예제
좋아, 요점에 가자! 블로거는 두 부분으로 소개 할 계획입니다. 첫 번째 부분은 테이블 초기화 부분이며 두 번째 부분은 버튼 작동 추가, 삭제 및 수정 부분입니다.
1. 테이블 초기화
1.1. 준비
먼저 참조 해야하는 JS 및 CSS 파일을보십시오.
<link href = "~/content/bootstrap/css/bootstrap.min.css"rel = "스타일 시트"/> <link href = "~/content/bootstrap-table/bootstrap-table.min.css"rel = "Stylesheet"/> <스크립트 src = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.min.js"> </script> <scrc = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> </script> src = "~/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <scrc = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/script/script.mapping-latout.js> js src = "~/content/bootstrap-table/knockout.bootstraptable.js"> </script> <script src = "~/scripts/department.js"> </script>
일반적으로 CSS 및 JS 파일이 일반적으로 사용됩니다. 주로 두 개의 사용자 정의 JS 파일이 있습니다 : Knockout.bootstraptable.js 및 Department.js. 이전 기사에서는 KO를 사용하여 데이터 바인드를 사용자 정의 할 수 있다고 소개했습니다. 마찬가지로, 테이블의 바인딩을 위해, 우리는 또한 Knockout.bootstraptable.js 내부의 사용자 정의 바인딩 코드를 정의합니다.
// KO 추가 ko.bindinghandlers.mybootStraptable = {init : function (요소, valueAccessor, allbindingsaccessor, viewModel) {// 여기에 oparam은 바운드 VIVEMODELVAR oviewModel = ValueAccessor (); var $ ele =입니다. $ (element) .BootStraptable (oviewModel.params); // 부트 스트랩 가능한 메소드 추가 OviewModel.bootStraptable = function () {return $ ele.bootstraptable.apply ($ ele, arguments);}, 업데이트 (요소, ValueAccessor, view -modcessor, viewmodacsel); {}}; // 초기화 (function ($) {// 부트 스트랩 가능한 ViewModel 메소드 추가 ko.bootStraptableViewModel = function (옵션) {var that = this; this; this. // 모든 열 표시 캐시 : false, showRefresh : true, // 새로 고침 버튼이 최소화됩니다. this.getSelections = function () {var arrres = that.bootStraptable ( "getSelections") return arrres;}; // refresh this.refresh = function () {that.bootStraptable ( "refresh");};}) (jQuery);코드 의심 :이 JS 파일은 주로 두 가지를 수행합니다
1. 데이터 바인드 속성 MyBootStraptable을 사용자 정의하십시오. ko.bindinghandlers.mybootStraptable의 업데이트 메소드의 경우이를 정의 할 필요가 없습니다.
2. KO 객체에 부트 스트랩 가능한 ViewModel을 추가하여 부트 스트랩 가능을 캡슐화하십시오.
1.2. HTML 태그의 바인딩을 시작하십시오
<table id = "tb_dept"data-bind = "mybootStraptable : $ root"> <tr> <th data-checkbox = "true"> </th> <th data-field = "name"> 부서 이름 </th> <th data-field = "level"> 부서 수준 </th> <th data-field = "des"> <th data-field = "strcreateme =" "strcreateme" 시간 </th> </tr> </teaad> </table>
코드 의심 : 테이블 태그를 정의하고 MyBootStraptable에 사용자 정의 바인딩을 사용하십시오. 이전 기사에서 언급했듯이 $ root는 초기화의 의미로 이해 될 수 있습니다. 단순화하기 위해 모든 열은 <th>에 직접 작성됩니다.
1.3. KO의 결합을 활성화하십시오
페이지로드 후 KO의 바인딩을 시작합니다.
// $ (function () {// 1, Init TableInit.init.init.init (); // 2, 추가 기능, Deletion and Modification event lortating.operateInit ();}); // 초기화 var tableInit = {init : function () {// table vovemodelthis.myViewModel = new koOtStraptableViewModEL : '/department/getDepartment', // 요청 URL (*) 메소드 : 'get', // request Method (*) 도구 모음 : '#ToolBar', // 컨테이너가 도구 버튼 QueryParams에 사용되는 컨테이너 : function (param) {return : param.limit : wortset : param.offset};}, // pagination (*) SidePagination : "Server", // Pagination Method : 클라이언트 클라이언트 Pagination (*) PageNumber : 1, // 첫 번째 페이지를로드 할 첫 번째 페이지 초기화, 기본 첫 페이지 pageize : 10, // 페이지 당 레코드 줄 수 : [*) 페이지 당 페이지 당 // 선택 (*)}; document.getElementById ( "tb_dept");}};코드 의심 : 페이지가로드 된 후에는 전달 된 매개 변수를 병합하기 위해 위에 캡슐화 된 부트 스트랩 가능한 ViewModel 객체를 호출하고 바인딩을 활성화하고 바인딩 뷰 모델로 MyViewModel을 활성화하십시오. 디버깅 코드는 KO.AppLyBindings (this.myViewModel, Document.GetElementById ( "TB_DEPT")); 실행됩니다. 사용자 정의 바인딩이 적용되며 프로그램은 ko.bindinghandlers.mybootStraptable 객체의 초기 메소드를 입력하여 부트 스트랩 가능성을 초기화합니다. 다음은 다음과 같이 설명해야합니다.
init : function (요소, valueaccessor, allbindingsaccessor, viewmodel) {// 여기에 oparam은 바운드 뷰 모드 바비 var oviewmodel = valueAccessor (); var $ ele = $ (요소) .BOOTSTRAPTBLE (oviewModel.params); {return $ ele.bootstraptable.Apply ($ ele, arguments);}}위의 초기 방법에서, 두 번째 매개 변수 ValueAccessor를 통해, 우리는 현재 바운드 뷰 모델을 가져옵니다. 블로거는 이것이 맞춤형 바인딩의 논리에 대한 이해에 도움이된다고 생각합니다. 기본적 으로이 문장을 실행하면 var $ ele = $ (element) .BootStraptable (oviewModel.params); 테이블 초기화가 완료되었습니다. 블로거는 백그라운드에서 해당 방법에 대한 컬렉션을 정의합니다. 완전성을 위해 여기에 게시하겠습니다.
DepartmentController
2. 버튼 작동
위의 것은 부트 스트랩 가능의 초기화를 통해 사용자 정의 데이터 바인드를 사용하는 것입니다. 아래 버튼 작동을 사용하여 모니터링 속성을 사용하여 "Shuangweiwai"를 경험해 봅시다.
2.1. 페이지보기
먼저보기 페이지에서 택시 애드 버튼을 정의하십시오
<div id = "도구 모음"> <버튼 id = "btn_add"type = "button"> <span aria-hidden = "true"> </span> add </button> <button id = "btn_edit"type = "button"> <span aria-hidden = "true"> </span> modify </spant> <button id = "btn_delete" "btn_delete" aria-hidden = "true"> </span> delete </button> </div>
단순화하기 위해 블로거는 숨겨진 팝업 상자를 사용하여 새로 추가되고 편집 된 텍스트 상자를 포함했습니다. 물론, 일반적으로 말하면, 당신은 여기에 부분적인 견해를 사용할 수 있으며, 프로젝트에 edit.cshtml이있을 수 있지만, 여기서 블로거는 텍스트의 초점이 아니기 때문에 한 페이지에 이것을 한 페이지에 넣습니다.
<div id = "myModal"tabindex = "-1"role = "대화 상자"aria-labelledby = "myModallabel"> <div role = "document"> <div> <div> <버튼 유형 = "button"data-dismiss = "modal"aria-label = "close"> <span aria-hidden = "true"> <h4 </span> id = "mymodallabel"> Operation </h4> </div> <div> <label for = "txt_departmentname"> 부서 이름 </label> <input type = "text"name = "txt_departmentname"data-bind = "value : name"id = "txt_departmentname"placeholder = "div> <div> <ladel for = "txt_departmentlevel"> 부서 레벨 </label> <입력 유형 = "text"name = "txt_departmentlevel"data-bind = "value : level"id = "txt_departmentlevel"placeholder = "departmentlevel"> </div> <div> <label </label "> <txt _des" data-bind = "value : des"id = "txt_des"placeholder = "description"> </div> </div> <div> <버튼 유형 = "버튼"Data-dismiss = "modal"> <span aria-hidden = "true"> </span> close </button> <button> <id = "btn_submit"data-dismiss = "mod"> <span " aria-hidden = "true"> </span> 저장 </div> </div> </div> </div>
2.2. JS 초기화 버튼 작동
// Operation var Operation = {// 버튼 초기화 버튼 이벤트 작동 : function () {this.operateadd (); this.operateUpdate (); this.operatedElete (); this.departmentModel = {ko.observable (), 이름 : ko.observable (), ko.observable (), ko.observable () ko.observable ()};}, // operationAdd : function () {) {$ ( '##btn_add'). on ( "click", function () {$ ( "#myModal"). modal (). on ( "ships.bs.modal", function () {var oemptymodel = {id : ko.observable (), name : ko.observable (), 레벨 : ko.observable (), des : ko.observable (), createTime : ko.observable ()}; ko.utils.extend (Operate.DepartmentModel, oemptymodel); ko.applybindings (Operate.departmentModel, document.getElementById ( "myModal"); Operate.operatesave ();}). on ( 'hidden.bs.modal', function () {ko.cleannode (document.getElementById ( "myModal"));});});}); {$ ( '#btn_edit'). on ( "click", function () {) {$ ( "#myModal"). modal (). on ( "shavs.bs.modal", function () {var rratedData = tableInit.myViewModel.getSelections (); if (! Operate.operTectedData) {replerated retrated retrated retrated retrated retract (! ViewModelKo.utils.extend (Operate.DepArtmentModel, KO.Mapping.fromjs (ArrrrecredData [0]); KO.AppLyBindings (Operate.DepArtmentModel, Document.GetElementById ( "MyModal")); On ( 'HIDDEN,}). {// 팝업 박스를 닫을 때 바인딩을 지우십시오 (이 명확한 바인딩을 지우고 등록 이벤트를 지우는 것이 포함됩니다) ko.cleannode (oc ArrrectedData = tableInit.myViewModel.getSelections (); $. ajax ({url : "/department/delete", type : "post", contentType : 'Application/JSON', data : json.stringify (ArrrecrecedData), success (data, status) {alert (status); // tableInit.myViewModel.Refresh ();}});});});}, // data Save OperatesAve : function () {$ ( '##btn_submit'). 데이터 modelvar odatamodel = ko.tojs (oviewmodel); var funcname = odatamodel.id?"update": ajax(ul : "/department/"+funcname, type : "post", data : odatamodel, success : function, status). {alert (status); tableInit.myViewModel.Refresh ();}});});});});}, // 데이터 확인 OperateCheck : function (arr) {if (arr.length <= 0) {alert ( "최소한 하나의 데이터 행의 행을 선택하십시오"); arl.length> 1) {alert (Alert (alter) "); false;} return true;}}코드 회의론 : 실행 논리에 대해 알려주십시오. 먼저 Call Operator.operateInit (); $ (function () {}) 메소드에서 OperatorInit () 메소드에서 페이지의 버튼 클릭 이벤트를 등록하고 this.departmentModel을 새로 편집 한 뷰 모델로 정의하십시오. 이 뷰 모델은 페이지 요소에 해당하는 모니터링 속성을 정의합니다. 위에 숨겨진 팝업 박스의 데이터 바인드를 아직도 기억하십니까? 예, 해당 값은 여기서 모니터링 속성에 해당합니다. 바인딩을 설정 한 후,이를 초래하는 JS의 모든 모니터링 변경은 인터페이스의 바인딩 태그의 값을 변경합니다. 반대로, 인터페이스의 모든 태그의 값 값 변경은 필연적으로 모니터링 속성 값의 변경을 유발합니다. 이것은 소위 양방향 바인딩입니다. 양방향 바인딩의 실행을 자세히 살펴 보겠습니다.
2.3. 새로운 운영
$ ( '#btn_add'). on ( "click", function () {$ ( "#myModal"). modal (). on ( "shavs.bs.modal", function () {var oemptymodel = {ko.observable (), name : ko.observable (), ko.observable (), ko.observable (ko.observable) ko.observable ()}; ko.utils.extend (Operate.departmentModel, oemptymodel); ko.applybindings (ortorate.departmentModel, getElementById ( "myModal")); Operate.operatesave ();}). {ko.cleanNode (document.getElementById ( "myModal");});});인터페이스가 새로운 작업을 트리거하면 위에서 언급 한 숨겨진 모달 상자가 먼저 나타납니다. 모달 상자가 표시되면 먼저 빈 뷰 모델을 정의한 다음 ko.utils.extend (Operate.DepartmentModel, oemptymodel)를 호출하십시오. 이 문장은 빈 뷰 모델로 글로벌 운영을 덮어 씁니다. ko.utils.extend () 메소드의 기능은 jQuery에서 $ .extend ()의 함수와 유사합니다. 두 가지 객체 모두 후속 객체에 따라 병합되며 병합 후에는 새로운 뷰 모델을 사용하여 바인딩이 활성화됩니다. 바인딩을 활성화 한 후 저장 버튼의 클릭 이벤트를 등록하십시오. 이것을 추가하면 모달 상자가 나타납니다. 뷰 모델의 모니터링 속성이 모두 비어 있으므로 해당 인터페이스 요소의 값도 지워지므로 새로 추가 된 부분에서 볼 수 있습니다.
팝업 상자가 닫히면 ko.cleannode를 실행합니다 (Document.getElementByid ( "myModal")); 폐쇄 된 이벤트를 통해. 이 문장은 동일한 DOM의 경우 KO가 한 번만 구속 될 수 있기 때문에 매우 중요합니다. 다시 바인딩 해야하는 경우 먼저 바인딩을 지워야합니다. 또한 CleanNode () 메소드는 바인딩을 지우는 것뿐만 아니라 DOM에 등록 된 이벤트를 제거합니다. 사용할 때주의를 기울여야합니다!
2.4. 편집 작업
$ ( '#btn_edit'). on ( "click", function () {$ ( "#myModal"). modal (). on ( "shavs.bs.modal", function () {var arrrectedData = tableInit.myViewModel.getSelections (! if (! aUrtate.bs.Modal "), function (); if (! operateCreptedData)) 모형 to viewmodelko.utils.extend (Operate.departmentModel, ko.mapping.fromjs (arrrrestedData [0]); ko.applyBindings (Operate.DepArtmentModel, document.getElementById ( "myModal")); On ( 'hidden,}). {// 팝업 박스를 닫을 때 바인딩을 지우십시오 (이 명확한 바인딩을 지우고 등록 이벤트를 지우는 것이 포함됩니다) ko.cleannode (Document.GetElementById ( "myModal");});});});}) ;;편집 작업을 트리거 할 때 인터페이스가 여전히 나타납니다. 팝업 박스의 팝업 이벤트에서는 현재 선택된 행을 취한 다음 행이 선택되었는지 확인합니다. 문장 ko.mapping.fromjs (arrr rratedData [0])를 통해 모니터링 속성을 통해 일반 JSON 객체를 ViewModel로 변환하는 것이 가장 좋습니다. 이전 기사에서 언급 했듯이이 방법에는 JS 파일 녹아웃 .mapping-latest.js의 지원이 필요합니다. 변환 후, viewmodel은 여전히 ko.utils.extend () 메소드를 통해 업데이트 된 다음 바인딩을 활성화합니다. ViewModel은 현재 선택된 행의 데이터로 업데이트되므로 결과는 다음과 같습니다.
2.5. 작업을 저장하십시오
팝업 상자를 추가하고 편집하면 관련 정보를 수정 한 후 저장을 클릭하면 저장 이벤트가 트리거됩니다.
$ ( '#btn_submit'). on ( "click", function () {// 현재 ViewModelVar oviewModel = Operating.DepArtmentModel; // viewModel을 데이터 모델로 변환 = KO.TOJS (oviewModel); var funcname = odatamodel.id?"update":"add" ;$.ajax( "/department/"+funcname, type : "post", data : data : odatamodel, success (data, status) {alert (status); tableinit.myviewmodel.refresh ();});저장 이벤트가 트리거되면 먼저 ViewModel을 페이지에 바인딩 한 다음, 작업 .DEPARTMENTMODEL을 사용한 다음 KO.TOJS () 메소드를 사용하여 모니터링 속성을 순수한 데이터로 JSON 객체로 변환합니다. 이 방법은 KO에 내장되어 있으며 다른 JS 지원이 필요하지 않습니다. JSON 객체를 얻은 후 AJAX 요청을 보내 데이터를 추가하거나 편집하십시오. 이것은 양방향 바인딩을 잘 반영합니다. 인터페이스에서 모든 텍스트 상자의 값이 변경되면 작동 변경도 트리거됩니다.
2.6. 작업 삭제
삭제 작업에 대해 할 말이 없으며 KO와는 아무 관련이 없습니다.
3. 요약
위의 내용은 간단한 추가, 삭제, 수정 및 검색 작업을 통해 KO 및 부트 스트랩 가능의 공동 사용을 소개합니다. KO는 DOM에서 당신을 자유롭게하고 ViewModel에 집중할 수 있습니다. 전체 JS 코드를 살펴보면 jQuery의 val (), text () 및 기타 작업을 통해 값을 얻고 인터페이스 dom에 할당 할 수 없습니다. 깨끗하고 상쾌하고 고급처럼 보입니까? 물론 이것은 KO의보다 기본적인 사용 중 일부일 수 있습니다. 결국, 블로거들은 3 일 동안 KO를 배우고 있었으며, 더 많은 고급 사용법을 탐색해야합니다. 한동안 익숙해지면 모든 고급 사용법을 모든 사람과 공유하게됩니다. 이 기사가 KO의 원리와 그 사용법을 이해하는 데 도움이 될 수 있다고 생각한다면, 그것을 추천 할 수도 있습니다. 편집자는 여기에 감사합니다!
위의 것은 부트 스트랩 가능과 녹아웃의 조합의 전체 내용으로, 추가, 삭제, 수정 및 검색 기능을 구현합니다 [2]. 나는 그것이 모두에게 도움이되기를 바랍니다!