환경 준비
공식적으로 백본을 공부하기 전에 무언가를 준비해야합니다.
먼저 백본 프레임 워크 소스 파일을 가져와야합니다 : http://documentcloud.github.com/backbone/
백본은 밑줄 프레임 워크의 기본 메소드에 의존하므로 밑줄 프레임 워크의 소스 파일을 다운로드해야합니다 : http://documentcloud.github.com/underscore/
백본에서 DOM 및 이벤트에 대한 작업은 타사 라이브러리 (예 : jQuery 또는 Zepto)에 의존하면 다운로드하려면 그 중 하나만 선택하면됩니다.
jQuery : http://jquery.com/
Zepto : http://zeptojs.com/
그것은 번거로운 것 같지만 백본의 목적은 간단한 프레임 워크를 사용하여 복잡한 응용 프로그램을 구축하는 것이므로 문제가 복잡하다는 것을 의미하지는 않습니다.
새 HTML 페이지를 만들고 다음과 같이 이러한 프레임 워크를 가져올 수 있습니다.
<script type = "text/javaScript"src = "jQuery/jQuery-1.8.2.min.js"> </script> <script type = "text/javaScript"src = "indentscore/indercore-min.js"> </script> <script> <script> <text/javaScript "src ="backbone/backbone/jscript ">
이 시점에서 백본을 실행 해야하는 환경에 대한 준비가되어 있습니다.
안녕하세요 세계
먼저이 Helloworld의 기능에 대해 이야기 해 봅시다. 페이지에 보고서 버튼이 있고, 팝업 입력 상자를 클릭하고, 내용을 입력하고, 확인하며, 콘텐츠가 페이지에 추가됩니다. 페이지 사진은 다음과 같습니다.
아래 코드를 보자 :
<! docType html> <html> <head> <title> the5fire.com-backbone.js-hello world </title> </head> <body> <body> <button> <button> <body> <button> </button </button </button "> </ul> <a href ="http://www.the5fire.com " src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script src = "http://documentcloud.github.com/underscore/underscore-min.js"> </script src = "http://documentcloud.github.com/backbone/backbone-min.js"> </script> </script> (function ($) {world = backbone.model.extend ({// 이름 속성 이름 : null}); worlds = backbone.collection.extend (// worlds)가있는 월드 객체 생성 옵션) {this.bind ( "adply.view.addoneworld)}; }, "Click #Check": "Checkin", // 이벤트 바인딩, ID 체크인 님과 묶음 : var world_name = promp ( "world_name =="); }, addOneworld : function (model) {$ ( "#world-list"). Append (<li> <b> " +"</b> planet! </li> ");코드가 직관적이라고 생각합니다. 백본,보기, 모델 및 컬렉션의 세 부분이 포함되며 나중에 언급됩니다. 여기서 이해하는 한 모델은 데이터 모델을 나타내고, 수집은 모델 모음이며,보기는 페이지와 간단한 페이지 논리를 처리하는 데 사용됩니다.