---
title: curl.jsを使ったBackbone.jsのAMD設定サンプル
tags: []
categories: ["Programming", "JavaScript", "Framework", "Backbone"]
date: 2013-12-20T10:37:34Z
updated: 2013-12-20T10:37:34Z
---
AMDをつかってみるmemo。[前記事のサンプル](/#/entries/213)を作ってみる
こんな構成
├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
Hello Backbone
curl.jsよくわかってない・・