모델
백본과 관련하여 가장 기본적인 것은 모델입니다. 이것은 백엔드 개발의 데이터베이스 매핑 모델과 같습니다. 또한 데이터 객체의 모델이며 백엔드의 모델과 동일한 속성을 가져야합니다 (프론트 엔드를 통해 작동 해야하는 속성 만).
예제에서 단계별로 백본 모델이 무엇인지 살펴 보겠습니다.
먼저 HTML 페이지 정의 :
<! docType html> <html> <head> <title> the5fire-backbone-model </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/4.4/jquery.min.js"</script> </script> < src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <스크립트 src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <스크립트 src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <스크립트 src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <cript> (function ($) {/***여기에 코드를 여기에 **/} (jquery); </scriper> </html>다음 코드는이 HTML의 스크립트 태그의 함수에 채워야합니다.
1. 가장 간단한 물체
man = backbone.model.extend ({initialize : function () {alert ( '이봐, 당신은 나를 창조합니다!');}}); var man = new man;이것은 매우 간단합니다. Helloworld에는 속성을 정의하지 않고 모델 프레젠테이션도 있습니다. 초기화 중 방법 또는 생성자입니다.
2. 객체 할당의 두 가지 방법
첫 번째는 직접 정의하고 기본값을 설정하는 것입니다.
man = backbone.model.extend ({initialize : function () {alert ( '이봐, 당신은 나를 창조합니다!두 번째 유형은 할당 할 때 정의됩니다
man = backbone.model.extend ({initialize : function () {alert ( '이봐, 당신은 나를 창조합니다!get 값을 사용하면 Get가 사용됩니다.
3. 객체의 방법
man = backbone.model.extend ({initialize : function () {alert ( 'hey, you create me! 새로운 사람; Alert (man.aboutMe ());4. 객체의 속성 변경을 듣습니다.
man = backbone.model.extend ({initialize : function () {alert ( 'hey, you create me! }, AboutMe : function () {return '내 이름은' + this. var man = new man; man.set ({name : 'the5fire'}) // 바운드 변경 이벤트를 트리거합니다.5. 객체 및 오류 프롬프트에 확인 규칙 추가
man = backbone.model.extend ({initialize : function () {alert ( 'hey, you create me! }); {이름 : {이름 : 'Zhang San', Age : '38'}, Validate : function (attributes) {if (attributes.name == '') { "Return"Name Be Beamp! " }}); var man = new man; man.set ({name : ''}); // 확인 규칙에 따라 오류 메시지가 나타납니다.6. 객체의 획득 및 저장은 서버 측 지원을 테스트해야합니다.
먼저 객체의 URL 속성을 정의해야합니다. 저장 메소드를 호출 할 때 객체의 모든 속성이 서버에 게시됩니다.
man = backbone.model.extend ({url : '/save/', initialize : initialize : function () {alert ( 'hey, you create me! this.bind (오류 ", 함수 (모델, 오류) {alert (error);}); {이름 : 'Zhang San', '38'}, validate : function (attributes.name == ') + ', 올해' + this.get ( 'age') + 'mander'); var man = new man ;; {name : 'the5fire'}); man.save (); // 게시물은 모델에 해당하는 URL로 전송되며 데이터 형식은 json {name ":"the5fire ","age ": 38} // 그런 다음 메소드 페치 ([옵션]) var man1 = new man을 사용하여 서버 측에서 데이터를 가져옵니다. // 첫 번째 케이스에서 직접 사용되는 경우, 해당하는 경우, // 당신은 당신의 모델의 요청을 보낼 수 있는지, // 또는 서버 측에 게시하십시오. man1.fetch (); // 두 번째 경우에는 다음과 같이 페치 할 매개 변수를 추가합니다. man1.fetch ({url : '/getmans/'}); // 이런 식으로 GET 요청이 URL/getmans/로 전송됩니다. // 서버에서 반환 한 결과 스타일은 저장시 게시물 형식과 동일한 해당 JSON 형식 데이터 여야합니다. // 서버에서 반환 된 데이터를 수락하는 방법은 다음과 같습니다 : man1.fetch ({url : '/getmans/', success : function (모델, 응답) {모델, 응답) {alert ( 'success'); // 모델은 검색 된 데이터 경보 ( '이름'); 경고 ( '오류');참고 : 위의 코드는 정상적으로 실행할 수있는 코드이지만 나중에 서버 측에 대한 인스턴스가 있습니다.
여기서 서버의 비동기 작동이 백본 .sync 메소드를 통해 완료되도록 추가해야합니다. 이 메소드를 호출 할 때 매개 변수가 자동으로 전달되고 해당 요청이 매개 변수에 따라 서버로 전송됩니다. 예를 들어, 저장하고 백본이 객체가 새로운 지 여부를 결정합니다. 새로 생성되면 매개 변수가 작성됩니다. 기존 객체 인 경우 변경 되었으면 매개 변수가 업데이트됩니다. 페치 메소드를 호출하면 매개 변수가 읽습니다. 그것이 leadory 인 경우 매개 변수가 삭제됩니다. 즉, 소위 CRUD ( "Create", "Read", "Update"또는 "Delete") 및이 4 개의 매개 변수에 해당하는 요청 유형은 게시, Get, Put 및 Delete입니다. 이 요청 유형에 따라 서버에서 해당 CRUD 작업을 할 수 있습니다.
메모:
URL 및 URLROOT와 관련하여 URL을 설정하면 CRUD가 해당 요청을이 URL에 보냅니다. 그러나 또 다른 문제는 삭제 요청이 전송되지만 데이터가 전송되지 않는다는 것입니다. 그런 다음 서버 측에서 어떤 객체 (레코드)를 삭제 해야하는지 알 수 없습니다. 그래서 여기 Urlroot의 또 다른 개념이 있습니다. URLROOT를 설정 한 후 PUT 및 DELETE 요청을 보낼 때 요청의 URL 주소는 : /baseUrl/} model.id]이므로 서버 측에서 URL 이후 값을 추출하여 해당 객체 (레코드)를 업데이트하거나 삭제할 수 있습니다.
수집
컬렉션은 순서대로 모델 객체 모음입니다. 개념을 이해하는 것은 매우 간단합니다. 몇 가지 예를 통해 그것을 보면 더 간단하게 알 수 있습니다.
1. 책과 책장에 대한 예
book = backbone.model.extend ({기본값 : {// DefaultStitle : 'Default'}, 'default'}, 초기화 : function () {// alert ( 'hey, you me!');}); bookshelf = backbone.collection.extend ({book}); book}); 'book1'}); var book2 = new Book ({제목 : 'book2'}); var book3 = new Book ({title : 'book3'}); // var bookshelf = new Bookshelf ([Book1, Book2, Book3]); // AddVar Bookshelf = New Bookshelf; Bookshelf.Add (Book1); Bookshelf.Add (Books.Add (Book2); Bookshelf.Add (Book3); BookShelf.Remove (Book3); // 밑줄 JS 라이브러리를 기반으로 할 수 있습니다. Bookshelf.each (function (book) {alert (book.get ( 'title'));});매우 간단하고 설명이 없습니다
2. Fetch를 사용하여 서버 측에서 데이터를 얻습니다.
먼저 위의 책장에서 URL을 정의해야합니다. Urlroot 속성은 컬렉션에 존재하지 않습니다. 또는 다음과 같이 페치 방법에서 URL 값을 직접 정의합니다.
Bookshelf.fetch ({url : '/getbooks/', success : function (collection, response) {collection.each (function (book) {alert (book.get ( 'title'));});}, error : function () {alert ( 'error');}});리턴 값을 허용하는 두 가지 방법도 있습니다. 구체적인 의미를 이해하기 쉽다고 생각합니다. 데이터를 올바른 형식으로 반환하면 성공 메소드를 호출하면 오류 메소드가 호출됩니다. 물론, 오류 방법은 또한 성공 방법과 동일한 공식 매개 변수를 추가하는 데 달려 있습니다.
해당 책장을 반환하는 형식은 다음과 같습니다. [{ 'title': 'book1'}, { 'title': 'book2'} .....]
3. 방법을 재설정하십시오
이 방법을 사용하면 위의 페치와 조정해야합니다. 컬렉션이 데이터를 가져 오면 재설정 메소드가 호출되므로 재설정 메소드를 정의하거나 컬렉션의 재설정 메소드를 바인딩해야합니다. 바인딩 사용의 시연은 다음과 같습니다.
Bookshelf.bind ( 'Reset', showallbooks); showallbooks = function () {bookshelf.each (function (book) {// 책 데이터를 페이지에 렌더링합니다.});}결합 단계는 가져 오기 전에 수행해야합니다.
수집에 대한 완전한 코드는 아래에 나와 있으며 서버 측 지원이 필요합니다. 서버 측 구조는 나중에 작성됩니다.
<! docType html> <html> <head> <title> the5fire-backbone-collection </title> </head> </body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/4.4/jquery.min.js"</script> </script> src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <스크립트 src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <스크립트 src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <스크립트 src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <cript> (function ($) {// 컬렉션은 간단한 모델 // 1입니다. Defaults에 대한 Blue Courction : 'Default'} { 'rection ('recte}); 책 (Book3). i <bookshelf.length.length; Bookshelf.bind ( 'Reset', showallbooks); {url : '/getbooks/', success (collection, response) {alert (book.get ( 'title'));}); Bookshelf.each (function (book) {// 책 데이터를 페이지에 렌더링합니다.};