Brunch(Backbone.js)の練習を兼ねて、Backbone.js で HTML の View と Model を分離してみるよのサンプルをBrunchで。
まずは、スケルトン作成
watchしつつ、ファイル更新を検知してコンパイルしつつ、サーバーを3333番portで起動する
$ cd brtwitter
$ brunch watch --server
[19:23:17]: [Brunch]: application starting on http://0.0.0.0:3333.
[19:23:17]: [Brunch]: compiled.
あとはapp以下のファイルをいじる。
models/tweet.coffee
モデルをつくる。
class exports.Tweet extends Backbone.Model
initialize: ->
@set
domId: "tweet_#{@cid}"
collections/tweet_list.coffee
コレクションを設定。ここまでは簡単
{Tweet} = require 'models/tweet'
class exports.TweetList extends Backbone.Collection
model: Tweet
views/tweet_list_view.coffee
{TweetView} = require 'views/tweet_view'
{Tweet} = require 'models/tweet'
tweetListTemplate = require './templates/tweet_list'
class exports.TweetListView extends Backbone.View
id: 'tweets-view'
initialize: ->
app.tweetList.bind 'add', @addOne
$('body').append @render().el
render: ->
$(@el).html tweetListTemplate()
@
addOne: (tweet) ->
view = new TweetView model: new Tweet(tweet)
$(@el).find('#tweets').prepend view.render().el
views/templates/tweet_list.eco
テンプレートは今回ecoをデフォルトのecoを使った。個人的にはjadeのほうが好きなのでそのうちJadeに乗り換える。
views/templates/tweet_list.eco
views/tweet_view.coffee
同様にtweetも
tweetTemplate = require('./templates/tweet')
class exports.TweetView extends Backbone.View
id: 'tweet-view'
tagName: 'li'
initialize: ->
@model.view = this
render: ->
$(@el).html tweetTemplate tweet: @model.toJSON()
@
views/templates/tweet.eco
<div class="twtr-avatar">
<div class="twtr-img">
<a href="http://twitter.com/intent/user?screen_name=<%= @tweet.from_user %>" target="_blank">
<img src="<%= @tweet.profile_image_url %>">
</a>
<p><%= @tweet.text %></p>
</div>
</div>
assets/index.html
bodyタグの間に入れとく
<input id="searchTxt" type="text" value="backbone.js" />
<button id="searchBtn">search</button>
<div id="tweetContainer">searchボタンを押すとTwitterから検索してくるよ！</div>
initialize.coffee
最後に初期化する。
{BrunchApplication} = require 'helpers'
{MainRouter} = require 'routers/main_router'
{TweetList} = require 'collections/tweet_list'
{TweetListView} = require 'views/tweet_list_view'
class exports.Application extends BrunchApplication
initialize: ->
@router = new MainRouter
@tweetList = new TweetList
@tweetListView = new TweetListView
$("#searchBtn").click (e) ->
jqxhr = $.ajax
dataType: "jsonp"
url: "http://search.twitter.com/search.json"
data: { q: encodeURI( $( "#searchTxt" ).val() ) }
jsonp: "callback"
jqxhr.done (data) ->
_.each data.results, (result) ->
app.tweetListView.addOne(result)
window.app = new exports.Application
ファイル構成はこんな感じ。home_*は必要ないけどスケルトンで作成されたのでそのまま放ってある。
.
├── assets
│ ├── images
│ └── index.html
├── collections
│ └── tweet_list.coffee
├── helpers.coffee
├── initialize.coffee
├── models
│ └── tweet.coffee
├── routers
│ └── main_router.coffee
├── styles
│ └── main.styl
└── views
├── home_view.coffee
├── templates
│ ├── home.eco
│ ├── tweet.eco
│ └── tweet_list.eco
├── tweet_list_view.coffee
└── tweet_view.coffee
backbone.jsってviewがファットになんのね。
入門Git
大手メーカーが作らない「B級」iPhoneゲームが売れる50の理由
JavaScript Web Applications
Developing Backbone.Js Applications