Backbone.일의 시작

13149 단어 jQueryJavaScriptBackbone.js

소스 코드


이어지난번의 보도를 사용해 보았다Collection.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>こんにちは。動物さん</title>

    <!-- テンプレート作成 -->
    <script type="text/template" id="animal-template">
        <div>
            こんにちは。<b><%- name %>ちゃん。</b>(<%- species %>)
        </div>
    </script>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
    <script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
</head>
<body>
    <h3>こんにちは。動物さん。</h3>
    <div id="myList"></div>

    <script type="text/javascript">
    (function() {
        //----------
        // Model作成
        //----------
        var Animal = Backbone.Model.extend({
            //Attribute(属性)
            defaults: {
                species: "Animal",
                name: "None"
            },
            //コンストラクタ
            initialize: function(){
                console.log("初期化処理 : " + this.get("species"));
            },
            //メソッド
            call: function(){
                console.log("動物 : " + this.get("species"));
                console.log("私の名前は" + this.get("name") + "です。");
            }
        });

        //Animal Collection のインスタンス化    
        //---------------
        // Collection作成
        //---------------
        var Animals = Backbone.Collection.extend({
            model: Animal
        });
        var animals = new Animals([
            {species: "猿", name: "えて吉"},
            {species: "鳥", name: "ピーコ"},
            {species: "牛", name: "モン助"},
            {species: "蛙", name: "けろっぴ"},
            {species: "馬", name: "馬之介"}
        ]);

        //----------
        // View作成
        //----------
        var BaseView = Backbone.View.extend({
            tagName: "div",
            className: "myDivClass",
            //テンプレート作成
            template: _.template($('#animal-template').html()),
            render: function(){
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            },
            //イベント定義
            events: {
                "click": "call"
            },
            //イベント実装
            call: function(){
                alert(this.model.get("name"));
            }
        });

        //Collection の展開
        animals.each(function(animal){
            var animalDiv = new BaseView({model: animal});
            $('#myList').append(animalDiv.render().el);
        });

    })();
    </script>
</body>
</html>
Collection로 돌리고eachView의Model로 실례화하여 대상의<div>에 추가하는 느낌.

실행 결과

Collection에 등록된 Model 이 View 에 추가됩니다.이전과 동일하게 View 로 설정됩니다.이런 절차인가요?

손을 대는 과정에서 Events의 작용과 처리 절차를 이해할 수 있다고 느낀다.MVC에 대한 이해는 아직 충분하지 않지만.
JS_데이터 유형
Object 새로운 기능

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage