Backbone.js의 개발 환경을 구축하고 MVC 모드로 써봤어요.

환경 구조

전제 조건

$ npm install -g generator-backbone

절차.

생성기를 시작합니다.

$ yo backbone

이번에는 CoffScript만 선택했습니다.

$ bower install

파일이 다음과 같이 확장되었습니다.

여기서 동작을 확인하세요.

$ grunt serve

Backbone.js로 써주세요.

$ yo backbone:model hoge
$ yo backbone:collection hoge
$ yo backbone:view hoge
$ yo backbone:router hoge

$ yo backbone:model hoge_model
$ yo backbone:view hoge_view

모델 생성

'use strict';

class BackboneTest.Models.HogeModel extends Backbone.Model
  url: ''

  initialize: () ->

  defaults:
    name: ""
    age: ""

  validate: (attrs, options) ->

  parse: (response, options) ->
    response

View 및 템플릿 생성

<p>
  名前：<%= name %>
</p>
<p>
  年齢：<%= age %>
</p>

<hr>

<p>
  新しい年齢：<input type="text" />
  <br>
  <font size="1px" color="orange">
    Model へ反映 ⇨ 自動的に View へ反映されるデモです。<br>
    ただリアルタイムデータバインドが聞いてないのでカーソル外してください..</font>
</p>

'use strict';

class BackboneTest.Views.HogeView extends Backbone.View

  template: JST['app/scripts/templates/hoge_view.ejs']

  tagName: 'div'

  id: ''

  className: ''

  events:
    "change input": "inputCange"

  inputCange: () ->
      @model.set("age", @$("input").val())

  initialize: () ->
    @listenTo @model, 'change', @render

  render: () ->
    @$el.html @template(@model.toJSON())

전체 국면을 통합하다.

〜

<div id="hoge"></div>

〜

window.BackboneTest =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  init: ->
    'use strict'

    model = new @Models.HogeModel(
        name: "山田 太郎"
        age: 31
    )

    view = new @Views.HogeView(
      el: $("#hoge")
      model: model
    )

    view.render()

    return

$ ->
  'use strict'
  BackboneTest.init();

맺음말(Backbone.js에 대한 소감)