backbone.js todo例子精简版

最新推荐文章于 2017-10-07 13:41:00 发布

马红权

最新推荐文章于 2017-10-07 13:41:00 发布

阅读量1k

点赞数

文章标签： backbone.js

本文链接：https://blog.csdn.net/mahongquan/article/details/17679215

版权

简化 backbone.js的todo例子，成hello world版本,点击打开github 仓库。

在网上又发现了一个backbone.js的入门例子，比todo例子更简单，更适合初学者，点击打开链接。

各种javascript mvc 的todos 例子的实现，点击打开链接。

index2.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Backbone.js Todos</title>
  <link rel="stylesheet" href="todos.css"/>
</head>
<body>
  <div id="todoapp">
    <header>
      <h1>Todos</h1>
      <input id="new-todo" type="text" placeholder="What needs to be done?">
    </header>
    <section id="main">
      <ul id="todo-list"></ul>
    </section>
  </div>
  <div id="instructions">
    Double-click to edit a todo.
  </div>
  <script src="../../test/vendor/json2.js"></script>
  <script src="../../test/vendor/jquery.js"></script>
  <script src="../../test/vendor/underscore.js"></script>
  <script src="../../backbone.js"></script>
  <script src="../backbone.localStorage.js"></script>
  <script src="todos2.js"></script>
  <!-- Templates -->
  <script type="text/template" id="item-template">
    <div class="view">
      <label><%- title %></label>
      <a class="destroy"></a>
    </div>
    <input class="edit" type="text" value="<%- title %>" />
  </script>
  </body>
</html>

todos2.js

$(function(){
  Todo = Backbone.Model.extend({
    defaults: function() {
      return {
        title: "empty todo...",
      };
    }
  });
  TodoList = Backbone.Collection.extend({
    model: Todo,
    localStorage: new Backbone.LocalStorage("todos-backbone"),
  });
  Todos = new TodoList;
  TodoView = Backbone.View.extend({
    tagName:  "li",
    template: _.template($('#item-template').html()),
    events: {
      "dblclick .view"  : "edit",
      "click a.destroy" : "clear",
      "keypress .edit"  : "updateOnEnter",
      "blur .edit"      : "close"
    },
    initialize: function() {
      this.listenTo(this.model, 'change', this.render);
      this.listenTo(this.model, 'destroy', this.remove);
    },
    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      this.input = this.$('.edit');
      return this;
    },
    edit: function() {
      this.$el.addClass("editing");
      this.input.focus();
    },
    close: function() {
      var value = this.input.val();
      if (!value) {
        this.clear();
      } else {
        this.model.save({title: value});
        this.$el.removeClass("editing");
      }
    },
    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
    },
    clear: function() {
      this.model.destroy();
    }
  });
  AppView = Backbone.View.extend({
    el: $("#todoapp"),
    events: {
      "keypress #new-todo":  "createOnEnter",
    },
    initialize: function() {
      this.input = this.$("#new-todo");
      this.listenTo(Todos, 'add', this.addOne);
      this.listenTo(Todos, 'reset', this.addAll);
      this.listenTo(Todos, 'all', this.render);
      this.main = $('#main');
      Todos.fetch();
    },
    render: function() {
      if (Todos.length) {
        this.main.show();
      } else {
        this.main.hide();
      }
    },
    addOne: function(todo) {
      var view = new TodoView({model: todo});
      this.$("#todo-list").append(view.render().el);
    },
    addAll: function() {
      Todos.each(this.addOne, this);
    },
    createOnEnter: function(e) {
      if (e.keyCode != 13) return;
      if (!this.input.val()) return;
      Todos.create({title: this.input.val()});
      this.input.val('');
    }
  });
  App = new AppView;
});

马红权

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
backbone.js todo例子精简版

简化 backbone.js的todo例子，成hello world版本。 Backbone.js Todos Todos Double-click to edit a todo.
复制链接

扫一扫