backbone.jsbackbone.js 시작하기

비고

Backbone은 간단하면서도 강력한 클라이언트 측 JavaScript 라이브러리로서 응용 프로그램을 작성하는 데 사용됩니다. 데이터는 모델로 표현되며 컬렉션으로 모을 수 있습니다. 모델 상태가 와 함께 표시됩니다.

백본은 JavaScript 웹 응용 프로그램에서 유용 할 수있는 최소한의 데이터 구조 및 사용자 인터페이스 프리미티브를 제공하려고 시도합니다. 이 도구의 목적은 이러한 도구를 사용하는 방법이나 사용 사례가 어떻게 표시되는지를 지정하지 않고 이러한 도구를 제공하는 것입니다. 즉, 개발자는 자신의 응용 프로그램의 전체 경험을 디자인 할 자유가 있습니다.

기본 설정

Backbone은 DOM 조작 (Backbone.View 사용) 및 RESTful 지속성을 위해 Underscore 및 (선택적으로) jQuery 가 필요합니다.

Backbone을 시작하고 실행하는 가장 빠른 방법은 HTML <head> 에 간단한 스크립트 태그를 사용하여 index.html 파일을 만드는 것입니다.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
    </head>
    <body>
    </body>
</html>
 

이제 백본을 페이지에서 사용할 수 있습니다.

백본 사용 예 (주로 Backbone.Model)

Backbone.js는 컬렉션, 모델, 라우터 및 뷰라는 4 개의 개별 구성 요소로 이루어져 있습니다. 각각 다른 용도로 사용됩니다.

  • Model - 단일 데이터 객체를 나타내지 만 이벤트 시스템 및 원격 서버로 데이터를 검색하고 전송하는보다 편리한 방법과 같이 기본 JavaScript 객체가 제공하지 않는 추가 기능을 추가합니다.

  • Collection - 모델의 집합 또는 "컬렉션"을 나타내며 모델을 관리하는 기능을 제공합니다.

  • View - 사용자 인터페이스의 단일 부분을 나타냅니다. 각 뷰는 HTML DOM 요소를 래핑하고 단순한 이벤트 바인딩과 같은 편의 기능뿐만 아니라 해당 요소로 작업하기위한 구조를 제공합니다.

  • Router - URL 변경에 대한 응답으로 응용 프로그램이 다른 로직 (예 : 다른 페이지 표시)을 트리거하도록 허용하여 "단일 페이지 응용 프로그램"을 활성화합니다.

나만의 풍미를 만드십시오.

이러한 각 구성 요소를 사용하는 방법을 살펴보기 전에 우선 Backbone의 클래스 시스템을 간단히 살펴 보겠습니다. Backbone 클래스의 새로운 하위 클래스를 만들려면 원래 클래스의 extend 메서드를 호출하고 인스턴스 속성과 (정적) 클래스 속성을 개체로 전달하기 만하면됩니다.

const MyModelClass = Backbone.Model.extend({
    instanceMethod: function() { console.log('Instance method!'); },
}, {
    staticMethod: function() { console.log('Static method!'); },
});
 

다른 클래스 시스템과 마찬가지로 클래스의 인스턴스 (객체)에서 인스턴스 메서드를 호출 할 수 있으며 정적 메서드는 클래스 자체 (생성자)에서 직접 호출됩니다.

var myInstance = new MyModelClass();

// Call an instance method on our instance
myInstance.instanceMethod(); // logs "Instance method!"

// Call a static method on our class
MyModelClass.staticMethod(); // logs "Static method!"
 

수업 사용하기

이제 각 클래스를 어떻게 사용할 수 있는지에 대한 간단한 예를 살펴 보겠습니다. 우리는 책의 Model 으로 시작할 것입니다.

const Book = Backbone.Model.extend({
    idAttribute: 'isbn',
    urlRoot: '/book'
});
 

방금 일어난 일을 무너 뜨려 봅시다. 먼저 ModelBook 하위 클래스를 만들고 두 개의 인스턴스 속성을 제공했습니다.

  • idAttribute 는 Backbone에게 AJAX 조작을 수행 할 때 모델의 "isbn"속성을 ID로 사용하도록 지시합니다.
  • urlRoot , 백본에게 www.example.com/book 에서 서적 데이터를 찾도록 지시합니다.

이제 책의 인스턴스를 만들고 서버에서 데이터를 가져와 봅시다.

var huckleberryFinn = new Book({ isbn: '0486403491' });
huckleberryFinn.fetch({
    // the Backbone way
    success: (model, response, options) => {
       console.log(model.get('name')); // logs "Huckleberry Finn"
    }
}).done(() => console.log('the jQuery promise way'));
 

우리는 새로운 만들 때 Book 우리는 그것을 객체를 전달하고, 백본의 (데이터) "속성"처음으로이 객체를 사용 Model . Backbone은 idAttributeisbn idAttribute 것을 알고 있기 때문에 새로운 Book의 URL이 /book/0486403491 있습니다. fetch 을 내리면 백본은 jQuery를 사용하여 AJAX에서 도서 데이터를 요청합니다. fetch 는 fetch가 완료되면 액션을 트리거하는 데 사용할 수있는 promise ( $.ajax 와 똑같이)를 반환합니다.

속성은 get 또는 set 메소드를 사용하여 액세스하거나 수정할 수 있습니다.

huckleberryFinn.get('numberOfPages'); // returns 64

huckleberryFinn.set('numberOfPages', 1); // changes numberOfPages to 1
 

Models 에는 또한 이벤트 시스템이있어 Model 일이 발생했을 때 대응할 수 있습니다. 예를 들어 numberOfPages 변경 될 때마다 메시지를 기록하려면 다음을 수행 할 수 있습니다.

huckleberryFinn.on('change:numberOfPages', () => console.log('Page change!'));
 

다른 백본 클래스에 대한 자세한 내용은 개별 문서 페이지를 참조하십시오.

기본 개념을 보여주는 예

다음 예제는 다음을 소개합니다 :


<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
</head>
<body>

    <div id="example_container"></div>

    <script type="text/template" id="example_template">
        <label><%= example_label %></label>
        <input type="text" id="example_input" />
        <input type="button" id="example_button" value="Search" />
    </script>
    <script type="text/javascript">
        var ExampleView = Backbone.View.extend({
            // Compile the template using underscore
            template: _.template($("#example_template").html()),
            events: {
                "click #example_button": "onButtonClick"
            },

            initialize: function(options) {
                this.customOption = options.customOption;
            },

            render: function() {
                // Load the compiled HTML into the Backbone "el"
                this.$el.html(this.template({
                    example_label: "My Search"
                }));

                return this; // for chaining, a Backbone's standard for render
            },

            onButtonClick: function(event) {
                // Button clicked, you can access the button that 
                // was clicked with event.currentTarget
                console.log("Searching for " + $("#example_input").val());
            }
        });
        $(function() {
            //show the view inside the div with id 'example_container'
            var exampleView = new ExampleView({
                el: $("#example_container"),
                customOption: 41,
            });
            exampleView.render();
        });
    </script>
</body>
</html>
 

Hello Web (기본 "Hello World"유형 설정)

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
        
        <script>
            $( function(){
                ( function(){
                    var View = Backbone.View.extend( {
                        "el": "body",
                        "template": _.template( "<p>Hello, Web!</p>" ),
    
                        "initialize": function(){
                            this.render();
                        },
                        "render": function(){
                            this.$el.html( this.template() );
                        }
                    } );
    
                    new View();
                })()
            } );
        </script>
    </head>
    <body>
    </body>
</html>