主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

「JavaScriptエンジニア養成読本」でUnderscore.jsの_.templateメソッドを使うところが動かない

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

ひとまず、同じように困っている人がいたら参考になれば幸いです。