外部テンプレートの使い方 #template

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="Content-Type" content="text/html charset=utf-8"/>
    <title>js</title>
</head>
<body>
<script type="text/template" id="foo">
    <%- name %>
</script>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/test.js"></script>
</body>
</html>

test.js

(function() {

var M = Backbone.Model.extend({
    defaults: {
    name: "okamoto",
    judge: false
}
});
var m = new M();

var V = Backbone.View.extend({
    tagName: 'p',
    className: 'bar',
    id: 'baz',
    template: _.template( $('#foo').html() ),// htmlのid=fooのtemplateを指定
    render: function() {
        var template = this.template(this.model.toJSON()); //templateに、toJSONでこのモデルにオブジェクトを渡す
        this.$el.html(template);
        return this; // renderの時はreturn this;
    }
});
var v = new V({model:m});
$('body').append(v.render().el);
})();

http://dotinstall.com/lessons/basic_backbonejs/22407



ブラウザの表示

f:id:hrt0kmt:20140629222203p:plain

Promise

Promise

  • マット・キャブ
  • R&B/Soul
  • ¥250