curl.jsを使ったBackbone.jsのAMD設定サンプル

AMDをつかってみるmemo。前記事のサンプルを作ってみる

こんな構成

├src/main/webapp/resources
│  ├ app
│  │  └ js
│  │      ├ foo
│  │      │  ├ FooModel.js
│  │      │  ├ FooView.js
│  │      │  └ main.js
│  │      └ foo.js
│  ├ assets
│  │  ├ backbone.stickit
│  │  ├ backbone-amd
│  │  ├ curl
│  │  ├ jquery
│  │  └ lodash
│  └ foo.html
├ .bowerrc
└ bower.json

.bowerrc

{
    "directory": "src/main/webapp/resources/assets"
}

bower.json

{
  "name": "foo",
  "version": "0.0.0",
  "authors": [
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "public/lib",
    "test",
    "tests",
    "src/main/webapp/resources/assets"
  ],
  "dependencies": {
    "backbone-amd": "~1",
    "jquery": "~2",
    "lodash": "~1",
    "backbone.stickit": "~0.7",
    "curl": "~0.8"
  }
}

これで

$ bower install

foo.js

var curl;
(function () {
    curl({
        main: 'foo',
        packages: {
            foo: {location: 'app/js/foo'},
            curl: {location: 'assets/curl/src/curl'},
            jquery: {location: 'assets/jquery/jquery', main: '.'},
            backbone: {location: 'assets/backbone-amd/backbone', main: '.'},
            'backbone.stickit': {location: 'assets/backbone.stickit/backbone.stickit', main: '.'},
            underscore: {location: 'assets/lodash/lodash', main: '.'}
        }
    });
}());

FooModel.js

define(function (require) {
    var Backbone = require('backbone');

    return Backbone.Model.extend({
    });
});

空です

FooView.js

define(function (require) {
    var Backbone = require('backbone');
    require('backbone.stickit');
    var $ = require('jquery');
    var _ = require('underscore');

    return Backbone.View.extend({
        bindings: {
            '#firstName': 'firstName',
            '#lastName': 'lastName',
            '#fullName': {
                observe: ['firstName', 'lastName'],
                onGet: function (values) {
                    return values[0] + ' ' + values[1];
                }
            }
        },
        initialize: function () {
        },
        render: function () {
            this.stickit();
                return this;
        }
    });
});

AMDがよくわかっていなくて、backbone.stickitのロードがこれでいいのかよくわからない・・

main.js

define(function (require) {
    var FooModel = require('./FooModel');
    var FooView = require('./FooView');
    var $ = require('jquery');

    $(document).ready(function () {
        var fooModel = new FooModel();
        var fooView = new FooView({
            el: $('#name'),
            model: fooModel
        });
        fooModel.set({
            firstName: 'Taro',
            lastName: 'Yamada'
        });
            fooView.render();
    });
});

foo.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello Backbone</title>
    <script data-curl-run="app/js/foo.js" src="assets/curl/src/curl.js"></script>
</head>
<body>
<div id="name">
    <p>First name: <input id="firstName"/></p>

    <p>Last name: <input id="lastName"/></p>

    <h2>Hello, <span id="fullName"></span>!</h2>
</div>
</body>
</html>

curl.jsよくわかってない・・

IK.AM

curl.jsを使ったBackbone.jsのAMD設定サンプル

.bowerrc

bower.json

foo.js

FooModel.js

FooView.js

main.js

foo.html