Backbone.js 학습 노트 Hello World!

Backbone.js 와 MVC 구 조 를 사용 하여 전형 적 인 Hello World 프로젝트 를 만 듭 니 다.'닭 잡 는 데 소 칼 을 썼 다'지만 백 본 제 이 스 는 처음 이 니까 요.
의지 하 다

jQuery 1.9.1

Undersore.js 1.5.0

Backbone.js

시작 하 다

    //   Backbone    

在 extend 调用里设置指定的 routes 属性:

var router = Backbone.Router.extend({
    routes: {
        ' ': 'home'
    }
});

Backbone 에서 routes 속성 은 다음 과 같은 형식 이 필요 합 니 다.'path/:param':'action'은 URL 이 filename\#path/param 일 때 action 이라는 함 수 를 실행 합 니 다(Router 대상 에서 정의 합 니 다).그리고 홈 경로 추가:

var router = Backbone.Router.extend({
    routes: {
        ' ': 'home'
    }
});

지금 우 리 는 홈 함 수 를 추가 해 야 한다.

var router = Backbone.Router.extend({
    routes: {
        ' ': 'home'
    }
    ‘home’: function (){
        //    HTML
    }
});

뷰 를 만 들 고 렌 더 링 하 는 논 리 를 추가 합 니 다.지금 홈 뷰 를 정의 합 니 다.

var homeView = Backbone.View.extend({    
});

그리고 홈 뷰 에 속성 을 추가 합 니 다.

var homeView = Backbone.View.extend({    
    el: 'body',
    teplate: _.template('Hello world!')
});

엘 은 jQuery 선택 기 를 저장 하 는 문자열 로'클래스'와'\#'를 ID 로 사용 할 수 있 습 니 다.template 속성 은 Hello World 에 들 어 오 는 Underscore.js 함수 template 가 실 행 된 결과 에 할당 되 었 습 니 다.
홈 뷰 를 렌 더 링 합 니 다.this.$el 을 사용 합 니 다.이것 은 jQuery 대상 입 니 다.이것 은 el 의 속성 을 가리 키 며 jQuery.html()함수 로 this.template()의 결 과 를 사용 하여 HTML 을 교체 합 니 다.다음은 완전한 홈 뷰 코드 입 니 다.

var homeView = Backbone.View.extend({
        el: 'body',
        template: _.template('Hello World'),
        render: function (){
            this.$el.html(this.template({}));
        }
    });

이제 우 리 는 router 로 돌아 가 홈 함수 에 두 줄 을 추가 합 니 다.

var router = Backbone.Router.extend({
        routes: {
            '': 'home'
        },
        initialize: function (){
            //                 
        },
        home: function (){
            this.homeView = new homeView;
            this.homeView.render();
        }
    });

첫 번 째 줄 은 homeView 대상 을 만 들 고 router 에 값 을 부여 하 는 homeView 속성 입 니 다.두 번 째 줄 은 homeView 대상 의 render()방법 을 호출 하여 Hello World 를 촉발 합 니 다!수출
마지막 으로 전체 Backbone 응용 프로그램 을 시작 합 니 다.Dom 이 완전히 불 러 올 수 있 도록$(function(){}포장 기 를 사용 하여 new router 를 호출 합 니 다.

var app;
$(function (){
    app = new router;
    Backbone.history.start();
});

전체 데모 var app; var router = Backbone.Router.extend({ routes: { '': 'home' }, initialize: function (){ // }, home: function (){ this.homeView = new homeView; this.homeView.render(); } }); var homeView = Backbone.View.extend({ el: 'body', template: _.template('Hello World'), render: function (){ this.$el.html(this.template({})); } }); $(function (){ app = new router; Backbone.history.start(); });