환경대비
Backbone을 정식으로 배우기 전에 몇 가지 준비가 필요합니다.
먼저 Backbone 프레임워크 소스 파일을 가져와야 합니다: http://documentcloud.github.com/backbone/
Backbone은 Underscore 프레임워크의 기본 방법을 사용하므로 Underscore 프레임워크의 소스 파일도 다운로드해야 합니다: http://documentcloud.github.com/underscore/
Backbone에서 DOM 및 이벤트에 대한 작업은 타사 라이브러리(예: jQuery 또는 Zepto)에 의존합니다. 다운로드하려면 하나만 선택하면 됩니다.
jQuery: http://jquery.com/
젭토: http://zeptojs.com/
상당히 번거로워 보이지만 Backbone의 목적은 간단한 프레임워크를 사용하여 복잡한 애플리케이션을 구축하는 것이므로 문제가 복잡하다는 의미는 아닙니다.
다음과 같이 새 HTML 페이지를 만들고 이러한 프레임을 소개할 수 있습니다.
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="underscore/underscore-min.js"></script> <script type="text/javascript" src="backbone/backbone-min.js"></script>
이제 Backbone을 실행하는데 필요한 환경이 준비되었습니다.
헬로우 월드
먼저 이 helloworld의 기능에 대해 이야기해 보겠습니다. 페이지에 신고 버튼이 있습니다. 팝업 입력 상자를 클릭하고 내용을 입력한 후 확인하면 마지막으로 해당 페이지에 내용이 추가됩니다. 페이지 사진은 다음과 같습니다.
아래 코드를 보세요:
<!DOCTYPE html> <html> <head> <title>the5fire.com-backbone.js-Hello World</title> </head> <body> <button id="check">报到</button> <ul id="world-list"> </ul> <a href="http://www.the5fire.com">更多教程</a> </body> <script 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> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> <script> (function ($) { World = Backbone.Model.extend({ //创建一个World的对象,拥有name属性 name: null }); Worlds = Backbone.Collection.extend({ //World对象的集合 initialize: function (models, options) { this.bind("add", options.view.addOneWorld); } }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { //构造函数,实例化一个World集合类,并且以字典方式传入AppView的对象 this.worlds = new Worlds(null, { view : this }) }, events: { "click #check": "checkIn", //事件绑定,绑定Dom中id为check的元素 }, checkIn: function () { var world_name = prompt("请问,您是哪星人?"); if(world_name == "") world_name = '未知'; var world = new World({ name: world_name }); this.worlds.add(world); }, addOneWorld: function(model) { $("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候:hello world!</li>"); } }); //实例化AppView var appview = new AppView; })(jQuery); </script> </html>
코드는 나중에 언급할 백본, 뷰, 모델, 컬렉션의 세 부분으로 구성되어 있다고 생각합니다. 여기서 이해하는 한 모델은 데이터 모델을 나타내고 컬렉션은 모델의 모음입니다. , view 페이지 처리 및 간단한 페이지 로직을 처리하는데 사용됩니다.