JavaScript Backbone.js 프레임워크 환경 구축 및 Hello World 예제

JavaScript Backbone.js 프레임워크 환경 구축 및 Hello World 예제_기본지식

WBOY

풀어 주다： 2016-05-16 15:01:37

원래의

1815명이 탐색했습니다.

환경대비
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의 기능에 대해 이야기해 보겠습니다. 페이지에 신고 버튼이 있습니다. 팝업 입력 상자를 클릭하고 내용을 입력한 후 확인하면 마지막으로 해당 페이지에 내용이 추가됩니다. 페이지 사진은 다음과 같습니다.

201657111923472.jpg (1366×768)

아래 코드를 보세요:

<!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("请问，您是哪星人&#63;");
            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 페이지 처리 및 간단한 페이지 로직을 처리하는데 사용됩니다.