「JavaScriptエンジニア養成読本」でUnderscore.jsの_.templateメソッドを使うところが動かない
JavaScriptエンジニア養成読本 [Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! ] (Software Design plus)
- 作者: 吾郷協,山田順久,竹馬光太郎,和智大二郎
- 出版社/メーカー: 技術評論社
- 発売日: 2014/10/18
- メディア: 大型本
- この商品を含むブログ (3件) を見る
「JavaScriptエンジニア養成読本」というムック本(?)を読んでまして、JavaScriptもできてないので、かなり背伸びしてBackbone.jsを紐解いていたんですけども。
どうやっても掲載されているサンプルコードが動かず。ここ2、3日、毎日コンソールのエラーを見ては、頭を抱えていました。
どうやら、Underscore.js関係のところで
Uncaught ReferenceError: firstName is not defined
っていう意味わからないテンプレートで定義しているはずのfirstNameが見つからない的なエラーが出るという。。
で、ここで躓いていても仕方ないと思い、サンプルコードをどんどん進めていたのですが、決まって、このUnderscore.jsの_.templateメソッドを使うところでことごとくエラーが出て、それでも前に進むしかないと思って進めていたら、特集1のリスト13「TodoViewビューの定義」のコードで。
template : '<label>' + ' <input class="toggle" type="checkbox">' + ' <span><%= title $></span>' + '</label>' ,
これのプレースホルダの「$」まちがってるぽくない?!ってなって、「JavaScriptエンジニア養成読本 訂正」でググってみたら上の間違いについては出てこなかったのですが、それまで躓き続けた_.templateメソッドで出てきました!
先日発売されたJavaScriptエンジニア養成読本ですが、特集1のBackbone.jsの記事について、Underscore.jsのバージョンが執筆時の 1.6.0 から 1.7.0 に変わっている関係で現状だといくつかのコードが動作しないようでした。確認漏れですすみません…。 _.template()が常にコンパイル済みのテンプレートを持った関数を返すようになった関係で文中のサンプルにある次のようなコードが動かなくなっています。
引用元:"JavaScriptエンジニア養成読本Backbone.js特集の訂正 - text.ykhs.org
具体的には、下記のような感じのところを
var template = $('#contact-template').html(); var html = _.template(template, this.model.toJSON());
下記のように書き換えると、動きました。
var template = $('#contact-template').html(); var compiled = _.template(template); var html = compiled(this.model.attributes);
toJSON()をattributesに変えているのは、いろいろ調べているときに下記の記事を見つけたためです。
Marionette.jsのrepoを見ていて知ったのですが、BackboneのtoJSONをViewをrenderするデータを作る目的では使うべきではないということです。
引用元:"Don't use Backbone.Model#toJSON for render - blog.koba04.com
ひとまず、同じように困っている人がいたら参考になれば幸いです。