서문 : Blogger는 이전에 Knockoutjs와 부트 스트랩 가능한 몇 가지 기본 사용법을 공유했습니다. 그것들은 모두 기본 응용 프로그램이며 전혀 캡슐화되지 않습니다. 그들은 단지 HTML 컨트롤의 가치와 할당을 피하고 MVVM의 절묘함을 보여주는 것과는 거리가 멀다. 최근이 프로젝트는 공식적으로 KO를 사용할 계획이므로 KO와 부트 스트랩 가능에 대한 포장을 만들었으며 Park Friends가 참조하기 위해 여기에서 공유됩니다. 포장 아이디어는 블로그 파크 마스터 Xiao Qin을 참조하십시오. 공원 친구들이 더 나은 방법을 가지고 있다면 자유롭게 논의하십시오.
Knockoutjs 시리즈 기사 :
부트 스트랩 가능 및 Knockoutjs는 결합하여 추가, 삭제, 수정 및 점검의 기능을 달성합니다 [1]
부트 스트랩 가능 및 Knockoutjs는 결합하여 추가, 삭제, 수정 및 점검의 기능을 달성합니다 [2]
1. 첫 번째 뷰 모델은 쿼리를 처리합니다
데모의 구현은 여전히 마지막으로 부서 관리 기능을 계속하는 것입니다. 다음 확장은 데이터 흐름에 의해 설명됩니다.
1. 배경은 ViewModel의 구현을 View로 반환합니다.
public actionResult index () {var model = new {tableParams = new {url = "/department/getDepartment", // pagesize = 2,}, urls = new {delete = "/department/delete", edit = "/department/edit", add = "/department/edit",}, querycondition = new {name = " 보기 (모델);}코드 의심 : 여기에서 반환 된 모델에는 세 가지 옵션이 포함되어 있습니다
• TableParams : 페이지 테이블 초기화 매개 변수. 기본 매개 변수는 JS에 정의되므로 여기에 설정된 매개 변수는 페이지 별 초기화 매개 변수입니다.
• URL : 추가 요청, 삭제 및 수정 요청이 포함 된 URL 경로.
• QueryCondition : 페이지의 쿼리 조건.
2. CSHTML 페이지 코드
index.cshtml 페이지 코드는 다음과 같습니다.
@{layout = null;} <! doctype html> <html> <head> <meta name = "viewport"content = "width = device-width"/> <title> index </title> <link href = "~/bootstrap/css/bootstrap.min.css"rel = "inke" href = "~/content/bootstrap-table/bootstrap-table.min.css"rel = "stylesheet"/> <scrc = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/content/bootstrap/js/js/bootstrap.min.js"> src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <script src = "~/scripts/knockout-3.4.0.min.js"> src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout.mapping-latest.js"> </script> <script src = "~//scripts/extens/knockout.js"> </script src = "~/scripts/extensions/knockout.bootstraptable.js"> </script> <script type = "text/javaScript"> $ (function () {var data = @html.raw (newtonsoft.json.jsonConvert.SerializeObject (model)); document.getElementById ( "div_index");}); </script> </head> <body> <div id = "div_index"style = "padding : 0px; OverFlow-X : Hidden;"> <div> <div> 쿼리 조건 </div> <div> <formsearch "<input> <input" data-bind = "value : QueryCondition.name"> </div> <label> 부서 설명 </label> <div> <입력 유형 = "text"data-bind = "value : QueryCondition.des"> </div> <div 스타일 = "텍스트-알리그 : 오른쪽;"> <button type "data-bind ="클릭 : 클리어 클리어 " type = "button"data-bind = "click : queryclick"> query </butty> </div> </div> </div> <div id = "툴바"> <버튼 데이터-bind = "클릭 : addclick"type = "button"> <span aria-hidden = "true"> </span> add </span data-bind = "click : elit Click" ""> aria-hidden = "true"> </span> modify </bultify> <button data-bind = "click : deleteclick"type = "button"> <span aria-hidden = "true"> </span> delete </div> </div> <table data-bind = "bootstraptable : bootStraptable"> <TH data-checkbox = "trate"> 이름 </th> <th data-field = "level"> 부서 수준 </th> <th data-field = "des"> description </th> <th data-field = "strcreateTime"> 생성 시간 </th> </tead> </table> </div> </html>코드 의심 : 이전 기사와 마찬가지로 jQuery, 부트 스트랩, 부트 스트랩 가능, 녹아웃 및 기타 관련 파일을 인용해야합니다. 다음은 다음과 같은 두 문서입니다.
• Knockout.index.js : 쿼리 페이지와 관련된 속성 및 이벤트 바인딩을 캡슐화합니다.
• Knockout.bootstraptable.js : 부트 스트랩 가능의 초기화를 캡슐화하고 녹아웃 바인딩 방법을 사용자 정의합니다.
위의 모든 페이지 상호 작용은 공개 JS에 캡슐화되므로 페이지에서 할당, 이벤트 바인딩 등을 얻기 위해 DOM 요소와 같은 많은 중복 코드를 작성할 필요가 없습니다. 이 페이지에는 위의 JS의 두 문장 만 있습니다. 매우 쉽지 않습니까?
3. JS 캡슐화
위에서 언급 한 두 개의 JS 파일 인 Knockout.bootstable.js 및 Knockout.index.js를 살펴 보겠습니다.
(1) Knockout.bootstraptable.js
(function ($) {// 부트 스트랩 가능한 ViewModel 메소드 추가 ko.bootstraptableViewModel = function (옵션) {var that = this; this. 매개 변수 (*) Pagination : True, // Pagination Display (*) 사이드 파이션 : "Server", // Pagination Method : Client Client Pagination, Server Server Pagination (*) Pagenumber (*) Pagenumber (*) PageNumber : // 첫 번째 페이지를로드하려면 기본 페이지를 초기화합니다. 10, // PageList : // 10, 100] 방법 : 'get', true, // 테이블 검색이 클라이언트 검색이며 STRICTSEARCH : True, True : False, Showrefresh : True, // minight onformecolumns를 수행합니다. 클릭을 선택하는 행을 선택하여 showtoggle : true,}; this. this. {that.bootStraptable ( "refresh");};}; // ko 사용자 정의 바인딩 ko.bindinghandlers.bootstraptable = {init : function : function : function : valueaccessor, allbindingsaccessor, viewmodel) {// 여기에서 oparam은 valueaccesor (var var var var var varam)입니다. $ (element) .BootStraptable (oviewModel.params); // ViewModel oviewModel.bootStraptable = function () {return $ ele.bootstraptable.Apply ($ ele, Arguments);}, update : function (요소, valueAccessor, AllBindingsAcsor, viewmod) {}};}) (jQuery);코드 의심 : 위의 코드는 주로 두 가지를 수행합니다
1. 부트 스트랩 가능에 의해 초기화 된 사용자 정의 된 뷰 모델.
2.
KO 사용자 정의 바인딩을 추가하십시오.
Park Friends가 사용자 정의 구속력 사용을 이해하지 못하는 경우 자세한 소개를 위해 Blogger의 첫 두 블로그 게시물 (1)과 (2)를 확인할 수 있습니다.
(2) Knockout.index.js
(function ($) {ko.bindingViewModel = 함수 (data, bindlement) {var self = this; this.queryCondition = ko.mapping.fromjs (data.queryCondition); this.defaultQueryParams = {QueryParams : function (var var params = self.queryCondition; larmats = param.limit); param.offset; return params;}}; var tableparams = $ .Extend ({}, this.defaultQueryParams, data.tableParams || {}); this.bootStraptable = new KO.BoottStraptableViewModel (tableParams); // clear event this. (subl.CELECHECHECHECTECH (subL.CELERCOND) value) {// clear if (typeof (value) == "function") {this ( ''); sever.bootstraptable.refresh() ;//queryclick = function () {self.bootstraptable.refresh (); id = "myModal"tabindex = "-1"role = "대화 상자"aria-labelledby = "mymodallabel"> </div> '); dialog.load (data.urls.edit, null, function () {{}); $ ( "body"). Append (대화 상자); dialog.modal (). 팝업 박스를 닫을 때 바인딩 (이 명확한 등록 이벤트를 지우고 등록 이벤트를 지우는 것이 포함됩니다) ko.cleannode (docut self.bootstraptable.getSelections (); if (arrrrestedData.length <= 0 || arrrrecrededData.length> 1) {alert ( "한 줄만 편집 한 한 줄만 편집하십시오"); return;} var 대화 = $ ( '<div id = "myModal"tabindex = "-1"역할 = "dialog" aria-labelledby = "mymodallabel"> </div> '); dialog.load (data.urls.edit, arrrectedData [0], function () {}); $ ( "body"). Append (dialog); modal ('hidden.bs.modal ', function () {// when when when when when when the the the pop-pop-the the the the the the the pop-when 등록 이벤트의 바인딩 및 청소) ko.cleannode (document.getElementById ( "formedit")); dialog.remove (); self.bootStraptable.refresh ();});}; // 이벤트 this.deleteClick = function () {varrrecteddata = self.bootttraptable (); (! ArrrrescredData || arrrrecedData.length <= 0) {alert ( "최소한 하나의 줄을 선택하십시오"); return;} $. {alert (status); self.bootstraptable.refresh ();}});}; ko.applybindings (self, bindlement);};}) (jQuery);코드 의심 :이 JS는 주로 페이지 요소의 속성 및 이벤트 바인딩 및 설명 해야하는 여러 장소를 캡슐화합니다.
• this.queryCondition = ko.mapping.fromjs (data.queryCondition) :이 문장의 목적은 JSON 데이터에서 배경에서 전달 된 쿼리 조건을 JSON 데이터에서 속성을 모니터링하는 것입니다. 이 문장을 실행 함으로써만 속성과 페이지 요소를 양방향으로 모니터링 할 수 있습니다.
• self.bootstraptable.refresh () :이 문장의 의미는 테이블 데이터를 새로 고치는 것입니다. 실제로 부트 스트랩 가능의 새로 고침 방법이지만 블로거는 단순히 녹아웃 .BootStraptable.js 파일에 캡슐화합니다.
• dialog.load (data.urls.edit, null, function () {}) : 추가 및 편집하면 jQuery의 load () 메소드가 사용됩니다. 이 방법의 기능은이 URL의 페이지 요소를 요청하고 URL의 해당 페이지의 JS 코드를 실행하는 것입니다. 이 방법은 JS 파일을 동적으로 참조하고 JS 파일 내부의 코드를 실행하는 데 매우 강력합니다.
마지막으로 배경 getDepartment () 메소드에 해당하는 코드를 첨부하십시오.
[httpget] public jsonresult getDepartment (int limit, int offset, string name, string des) {var lstres = departmentmodel.getData (); if (! string.isnullorempty (name)) {lstres = lstres.where (x => x.name.contains (name)). (! string.isnullorempty (des)) {lstres = lstres.where (x => x.des.contains (des)). tolist ();} lstres.foreach (x => {x.strcreateTime = x.createtime.tostring ( "yyyy-mm-dd hh : mm : mm : ss";});});}); lstres.skip (오프셋) .take (limit) .tolist (), total = lstres.count}; return json (ores, jsonrequestbehavior.allowget);}}이 시점에서 쿼리 페이지의 쿼리 및 지우기 기능을 실현할 수 있습니다.
여전히 질문이 있습니까? 부트 스트랩 가능의 이벤트를 사용자 정의해야한다면 어떻게해야합니까? 백그라운드에서 뷰 모델을 통해 전송할 수 없습니다.
실제로 JS 이벤트 방법은 배경에서 전달 될 수 없으므로 프론트 엔드에서 이벤트의 처리 방법을 사용자 정의해야합니다. 예를 들어 다음과 같이 할 수 있습니다.
<script type = "text/javaScript"> $ (function () {var data = @html.raw (newTonsoft.json.jsonConvert.SerializeObject (model)); data.tableParams.onLoadSuccess = function (data) {alert ( "loadsuccess"); ko.bindingviewmodel, data, bindingviewmodel, document.getElementById ( "div_index");}); </script>2. 두 번째 뷰 모델 편집을 받으십시오
위의 뷰 모델 중 하나는 쿼리 및 삭제 기능을 처리하지만 추가 및 편집에는 다른 뷰 모델의 지원이 필요합니다. 편집의 패키지 구현을 살펴 보겠습니다.
1. ActionResult의 구현
위의 코드 쿼리를 통해 사용자가 추가 및 편집을 클릭하면 다른보기 뷰가 요청됩니다 →/Department/Edit. 편집보기 구현을 살펴 보겠습니다.
public actionResult edit (부서 모델) {var oresModel = new {editModel = model, urls = new {제출 = model.id == 0? "/Department/Add": "/Department/Update"}}; return view (OresModel);}코드 의심 : 위의 코드는 매우 간단합니다. 이는 뷰 모델을 편집 된 엔티티와 제출 된 URL을 포함하는 뷰 페이지로 반환하는 것입니다. 이 엔티티 기본 키가 존재하는지 여부는 현재 커밋이 새로운 엔티티인지 편집 엔티티인지 여부에 따라 결정됩니다.
2. CSHTML 코드
edit.cshtml 코드는 다음과 같습니다.
<form id = "formedit"> <div role = "div"> <div> <div> <div> <버튼 유형 = "버튼"data-dismiss = "modal"aria-label = "close"> <span aria-hidden = "true"> </span> </button> <h4 id = "mymodallabel"> 작동 </h4> <div> <label for = "txt_departmentname"> 부서 이름 </label> <입력 유형 = "text"name = "txt_departmentname"data-bind = "value : editModel.name"placeHolder = "Department"> </div> <div> <label for = "txt_departmentLevel"> Div Div> <텍스트 "텍스트" "txt_departmentLevel"> <input type = "txt_departmentLevel"> data-bind = "value : editModel.Level"placeHolder = "부서 수준"> </div> <div> <레이블에 for = "txt_des"> description </label> <input type = "text"name = "txt_des"data-bind = "value : editModel.des"placeHolder = "descriptive"> aria-hidden = "true"> </span> close </button> <button type = "제출"> <span aria-hidden = "true"> </span> 저장 </button> </div> </div> </form> <link href = "~/bootstrapvalidator/css/bootstrapvalidator.css"stylesheet = "////> src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <scrc = "~/scripts/extensions/knockout.edit.js"> </script> <script type = "text/javaScript"> $ (function () {var editdata = @html.raw (newtonsoft.json.jsonconvert.serializeobject (model)); ko.bindingeditviewmodel (editdata, {});코드 의심 : 검증 구성 요소 BootstrapValidator를 추가 했으므로 관련 JS 및 CSS를 참조해야합니다. 이 파일 Knockout.edit.js는 주로 편집 페이지의 속성 및 이벤트 바인딩을 캡슐화합니다. 이 JS의 구현 코드를 살펴 보겠습니다.
3. JS 캡슐화
Knockout.edit.js 코드 :
(function ($) {KO.BindingEditViewModel = function (data, validatorfields) {var that = {}; that.editModel = ko.mapping.fromjs (data.editModel); default = {메시지 : '검증 실패', fields : {{{{}) {boffort, form, form, form). ArrrectedData = ko.tojs (that.editModel); $. ajax ({url : data.urls.submit, type : "post", contenttype : 'application/json', data : json.stringify (ArrredData), 성공 : 기능 (데이터, 상태) {alert (status);}}); $ ( "#myModal"). modal ( "hide");}}; {}); $ ( '#formedit'). bootstrapvalidator (that.params); ko.applybindings (that, document.getElementById ( "formedit"));}) (jQuery);코드 의심 :이 JS는 주로 편집 모델의 속성과 제출 된 이벤트 바인딩을 캡슐화합니다. Bootstrapvalidator 검증 구성 요소가 사용되므로 양식 제출이 필요합니다. 실제로, 페이지 ID는 위의 "Formedit"및 "MyModal"과 같은 공개 JS에 표시되어서는 안됩니다. 이것은 매개 변수로 전달 될 수 있으며 최적화해야합니다. 파라미터 validatorfields는 검증 구성 요소의 확인 필드를 나타냅니다. 양식에 검증이 필요하지 않은 경우 빈 JSON을 전달하는 것이 좋습니다. 위의 기사에서는 필드 검증을하지 않았습니다. 실제로, 일반적으로 말하면, 기본 테이블에는 부서 이름의 비어 있지 않은 검증과 같은 하나 또는 몇 개의 비어 있지 않은 필드가 있습니다. edit.cshtml 페이지의 코드가 다음으로 변경됩니다.
<form id = "formedit"> <div role = "div"> <div> <div> <div> <버튼 유형 = "button"data-dismiss = "modal"aria-label = "close"> <span aria-hidden = "true"> </span> </button> <h4 id = "mymodallabel"> Operation </h4> </h4> <div> <txt _departmentn " 이름 </label> <input type = "text"name = "name"data-bind = "value : editModel.name"placeHolder = "div> <div> <label"> </div> <departmentlevel "> DepartmentLevel </label> <입력 유형 ="text "name ="level "data-bind ="value : editmodel.level " PlaceHolder = "DepartmentLevel"> </div> <div> <label for = "txt_des"> description </label> <입력 유형 = "text"name = "des"data-bind = "value : editmodel.des"placeholder = "des"> </div> <div> < "button"data-dismiss = "modal"> type = "제출"> <span aria-hidden = "true"> </span> 저장 </button> </div> </div> </form> <link href = "~/content/bootstrapvalidator/css/bootstrapvalidator.css"rel = "Stylesheet"/> <script src = "~/content/bootstrapvalidator/js/bootstrapvalidator.js"> </script> <scrc = "~/scripts/extensions/knockout.edit.js"> </script> <script type = "text/javaScript"> $ (function () {var editdata = @html.raw (newtonsoft.json.jsonconvert.serializeobject (model)); ko.bindingeditviewmodel (editdata, {validators : {메시지 : '이름이 비어있을 수 없습니다!'}});그런 다음 제출할 때 자동으로 확인됩니다.
참고 : 확인 속성 이름은 입력 태그의 이름 속성에 해당하므로 확인을 수행하려면이 이름 속성을 올바르게 설정해야합니다.
추가, 삭제 및 수정을위한 배경 방법을 첨부하는 것이 가장 좋습니다.
[httppost] public jsonresult add (department odata) {departmentmodel.add (odata); return json (new {}, jsonrequestbehavior.allowget);} [httppost] public jsonresult update (odata) {Departmentmodel.update (Odata); Return Json (New}, JSONREQUESTBEHAVIOR.ALKERGET);} [httpPost] public JsonResult Delete (List <Soctry> Odata) {DepartmentModel.Delete (Odata); return JSON (new {}, jsonRequestBehavior.allowget);}이 시점에서 전체 페이지의 추가, 삭제, 수정 및 확인의 효과는 괜찮습니다. 효과를 간단히 살펴 보겠습니다.
3. 요약
위의 내용은 단순히 기본 패키지 인 부트 스트랩 가능한+KO의 추가, 삭제, 수정 및 검색 서비스를 캡슐화합니다. 이를 프로젝트에 적용 해야하는 경우 다음과 같은 간단한 최적화 조치가 필요할 수도 있습니다.
1. 단순히 페이지의 뷰 모델이라면 백그라운드에서 ActionResult에서 반환하지 않고 뷰 페이지에 직접 작성하는 것이 좋습니다. 직렬화 및 매개 변수 통과 문제를 절약 할 수 있습니다. 이것은 최적화되어야합니다.
2. 페이지 요소의 ID는 공개 js에 나타나지 않아야합니다. 페이지 요소는 매개 변수를 통해 전달 될 수 있습니다.
3. 팝업 상자에 중복 코드가 많이있는 이벤트 메소드를 추가 및 편집하십시오. 이 부분을 수행하는 가장 좋은 방법은 팝업 상자를 별도의 구성 요소로 캡슐화하여 호출하는 것입니다. 이는 대부분의 JS 코드를 줄일 수 있습니다.
4. 쿼리 조건 및 편집 된 속성에 선택된 드롭 다운 박스 요소가있는 경우 DROPDOW 상자의 데이터 소스 및 기타 속성을 캡슐화해야 할 수도 있습니다. 이 부분은 매우 일반적입니다. 블로거가 데모를 분류 한 후이 작품을 추가하십시오.
위의 것은 편집기가 소개 한 부트 스트랩 가능 + Knockoutjs에 대한 솔루션이며, 추가, 삭제, 수정 및 검색을 달성하기 위해 (3) 두 뷰 모델이 추가, 삭제, 수정 및 검색을 완료했습니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!