Learn backbone 2nd

Posted on Tue 10 March 2015 in Programming

model

  • 继承 var ClsLink = Backbone.Model.extend({ defaults: { title: "" } initialize: function() { this.on("change:title", function() { console.log("title changed"); }); } })

var link = new ClsLink();

  • 赋值和取值 link.set({title: "sina"}); link.get("title");

  • 监听事件 this.on("change:title", function() { console.log("title changed"); });

  • 同步数据 url: " "

template

<script type="text/template" id="link-tpl">
    <tr>
        <td>1</td>
        <td><a href="<%=url%>"><%=title%></a></td>
        <td><%=url%></td>
        <td><%=category%></td>
        <td><%=tags%></td>
        <td>
          <a href="<%=linkid%>"><span class="glyphicon glyphicon-edit"></span></a>
          <a href="<%=linkid%>"><span class="glyphicon glyphicon-remove"></span></a>
        </td>
      </tr>
</script>

book

Backbone.js in action

  • Underscore
  • 事件管理
  • 数据模型
  • 模型集合
  • 视图
  • 导航控制器
  • Require 框架基础

tutorial

  • http://www.codebeerstartups.com/2012/12/how-to-use-templates-in-backbone-js-learning-backbone-js
  • http://pragmatic-backbone.com/views

add template

<!-- index.html -->
<script type="text/template" id="pod">
  <h2><%= title %></h2>
  <p><%= body %></p>
</script>
<script src="view.js"></script>


// view.js
var View = Backbone.View.extend({
  template: _.template($("#pod").html())
});

<!-- pod.html -->
<h2><%= title %></h2>
<p><%= body %></p>
// view.js
define(["text!templates/pod.html"], function(pod) {
  var View = Backbone.View.extend({
    template: _.template(pod)
  });
});

eclipse -vmargs -Xmx1024M