首页 > web前端 > js教程 > Backbone.js 为单页 ToDo 应用程序提供支持

Backbone.js 为单页 ToDo 应用程序提供支持

王林
发布: 2023-08-29 15:17:08
原创
1088 人浏览过

Backbone.js 为单页 ToDo 应用程序提供支持

Backbone.js 是一个用于构建灵活的 Web 应用程序的 JavaScript 框架。它带有模型、集合、视图、事件、路由器和其他一些很棒的功能。在本文中,我们将开发一个简单的 ToDo 应用程序,它支持添加、编辑和删除任务。我们还应该能够将任务标记为“已完成”并将其存档。为了保持这篇文章的长度合理,我们不会包含任何与数据库的通信。所有数据都将保存在客户端。

设置

这是我们将使用的文件结构:

css
    └── styles.css
js
    └── collections
        └── ToDos.js
    └── models
        └── ToDo.js
    └── vendor
       └── backbone.js
       └── jquery-1.10.2.min.js
       └── underscore.js
    └── views
    └── App.js
 └── index.html
登录后复制

有一些东西是显而易见的,例如 /css/styles.css/index.html。它们包含 CSS 样式和 HTML 标记。在 Backbone.js 的上下文中,模型是我们保存数据的地方。因此,我们的待办事项将只是模型。因为我们将有多个任务,所以我们会将它们组织成一个集合。业务逻辑分布在视图和主应用程序文件 App.js 之间。 Backbone.js 只有一个硬依赖项 - Underscore.js。该框架也与 jQuery 配合得很好,因此它们都转到 vendor 目录。我们现在只需要一点 HTML 标记,就可以开始了。

<!doctype html>
<html>
  <head>
        <title>My TODOs</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    <body>
        <div class="container">
            <div id="menu" class="menu cf"></div>
            <h1></h1>
            <div id="content"></div>
        </div>
        <script src="js/vendor/jquery-1.10.2.min.js"></script>
        <script src="js/vendor/underscore.js"></script>
        <script src="js/vendor/backbone.js"></script>
        <script src="js/App.js"></script>
        <script src="js/models/ToDo.js"></script>
        <script src="js/collections/ToDos.js"></script>
        <script>
            window.onload = function() {
                // bootstrap
            }
        </script>
    </body>
</html>
登录后复制

正如您所看到的,我们将所有外部 JavaScript 文件都包含在底部,因为在 body 标记的末尾执行此操作是一个很好的做法。我们还正在准备应用程序的引导。有内容容器、菜单和标题。主导航是静态元素,我们不会更改它。我们将标题的内容和下面的div替换掉。

规划应用程序

在我们开始做某事之前制定一个计划总是好的。 Backbone.js 没有非常严格的架构,我们必须遵循它。这是该框架的好处之一。所以,在开始实现业务逻辑之前,我们先来谈谈基础。

命名空间

一个好的做法是将代码放入其自己的范围内。注册全局变量或函数不是一个好主意。我们将创建的是一个模型、一个集合、一个路由器和几个 Backbone.js 视图。所有这些元素都应该存在于私人空间中。 App.js 将包含包含所有内容的类。

// App.js
var app = (function() {

    var api = {
        views: {},
        models: {},
        collections: {},
        content: null,
        router: null,
        todos: null,
        init: function() {
            this.content = $("#content");
        },
        changeContent: function(el) {
            this.content.empty().append(el);
            return this;
        },
        title: function(str) {
            $("h1").text(str);
            return this;
        }
    };
    var ViewsFactory = {};
    var Router = Backbone.Router.extend({});
    api.router = new Router();

    return api;

})();
登录后复制

以上是揭示模块模式的典型实现。 api 变量是返回的对象,代表类的公共方法。 viewsmodelscollections 属性将充当 Backbone.js 返回的类的持有者。 content 是一个指向主用户界面容器的 jQuery 元素。这里有两个辅助方法。第一个更新该容器。第二个设置页面的标题。然后我们定义了一个名为 ViewsFactory 的模块。它将传递我们的视图,最后,我们创建了路由器。

你可能会问,为什么我们需要一个工厂来存储视图?嗯,使用 Backbone.js 时有一些常见的模式。其中之一与视图的创建和使用有关。

var ViewClass = Backbone.View.extend({ /* logic here */ });
var view = new ViewClass();
登录后复制

最好只初始化视图一次并让它们保持活动状态。一旦数据发生更改,我们通常会调用视图的方法并更新其 el 对象的内容。另一种非常流行的方法是重新创建整个视图或替换整个 DOM 元素。然而,从性能的角度来看,这并不是很好。因此,我们通常会得到一个实用程序类,它创建视图的一个实例并在需要时返回它。

组件定义

我们有了一个命名空间,所以现在我们可以开始创建组件了。主菜单如下所示:

// views/menu.js
app.views.menu = Backbone.View.extend({
    initialize: function() {},
    render: function() {}
});
登录后复制

我们创建了一个名为 menu 的属性,它保存导航的类。稍后,我们可以在工厂模块中添加一个方法来创建它的实例。

var ViewsFactory = {
    menu: function() {
        if(!this.menuView) {
            this.menuView = new api.views.menu({ 
                el: $("#menu")
            });
        }
        return this.menuView;
    }
};
登录后复制

上面是我们处理所有视图的方式,它将确保我们只获得同一个实例的一个。在大多数情况下,这种技术效果很好。

流程

应用程序的入口点是 App.js 及其 init 方法。这就是我们将在 window 对象的 onload 及其 init 方法。这就是我们将在 window 对象的 onload 处理程序中调用的内容。

window.onload = function() {
    app.init();
}
登录后复制

之后,定义的路由器将获得控制权。根据 URL,它决定执行哪个处理程序。在 Backbone.js 中,我们没有通常的模型-视图-控制器架构。缺少控制器,大部分逻辑都放入视图中。因此,我们将模型直接连接到视图内的方法,并在数据更改后立即更新用户界面。

管理数据

我们的小项目中最重要的是数据。我们的任务是我们应该管理的,所以让我们从那里开始。这是我们的模型定义。

// models/ToDo.js
app.models.ToDo = Backbone.Model.extend({
    defaults: {
        title: "ToDo",
        archived: false,
        done: false
    }
});
登录后复制

只有三个字段。第一个包含任务文本,另外两个是定义记录状态的标志。

框架内的所有东西实际上都是一个事件调度程序。由于模型是通过设置器更改的,因此框架知道数据何时更新,并可以通知系统的其余部分。一旦您将某些内容绑定到这些通知,您的应用程序就会对模型中的更改做出反应。这是 Backbone.js 中一个非常强大的功能。

正如我一开始所说的,我们将有很多记录,我们将它们组织到一个名为 ToDos 的集合中。

// collections/ToDos.js
app.collections.ToDos = Backbone.Collection.extend({
    initialize: function(){
        this.add({ title: "Learn JavaScript basics" });
        this.add({ title: "Go to backbonejs.org" });
        this.add({ title: "Develop a Backbone application" });
    },
    model: app.models.ToDo
    up: function(index) {
        if(index > 0) {
            var tmp = this.models[index-1];
            this.models[index-1] = this.models[index];
            this.models[index] = tmp;
            this.trigger("change");
        }
    },
    down: function(index) {
        if(index < this.models.length-1) {
            var tmp = this.models[index+1];
            this.models[index+1] = this.models[index];
            this.models[index] = tmp;
            this.trigger("change");
        }
    },
    archive: function(archived, index) {
        this.models[index].set("archived", archived);
    },
    changeStatus: function(done, index) {
        this.models[index].set("done", done);
    }
});
登录后复制

initialize 方法是集合的入口点。在我们的例子中,我们默认添加了一些任务。当然,在现实世界中,信息将来自数据库或其他地方。但为了让您集中注意力,我们将手动执行此操作。集合的另一件事是设置 model 属性。它告诉类正在存储什么类型的数据。其余方法实现与我们应用程序中的功能相关的自定义逻辑。 updown 函数更改 ToDos 的顺序。为了简化事情,我们将仅使用集合数组中的索引来标识每个 ToDo。这意味着如果我们想要获取一条特定记录,我们应该指向它的索引。所以,排序只是交换数组中的元素。正如您可能从上面的代码中猜到的那样, this.models 是我们正在讨论的数组。 archivechangeStatus 设置给定元素的属性。我们将这些方法放在这里,因为视图将有权访问 ToDos 集合,而不是直接访问任务。

此外,我们不需要从 app.models.ToDo 类创建任何模型,但我们需要从 app.collections.ToDos 集合创建一个实例。

// App.js
init: function() {
    this.content = $("#content");
    this.todos = new api.collections.ToDos();
    return this;
}
登录后复制

显示我们的第一个视图(主导航)

我们必须展示的第一件事是主应用程序的导航。

// views/menu.js
app.views.menu = Backbone.View.extend({
    template: _.template($("#tpl-menu").html()),
    initialize: function() {
        this.render();
    },
    render: function(){
        this.$el.html(this.template({}));
    }
});
登录后复制

虽然只有九行代码,但这里发生了很多很酷的事情。第一个是设置模板。如果您还记得,我们将 Underscore.js 添加到了我们的应用程序中?我们将使用它的模板引擎,因为它运行良好并且使用起来很简单。

_.template(templateString, [data], [settings])
登录后复制

最后有一个函数,它接受一个以键值对形式保存信息的对象,而 templateString 是 HTML 标记。好的,它接受一个 HTML 字符串,但是 $("#tpl-menu").html() 在那里做什么?当我们开发小型单页面应用程序时,我们通常将模板直接放入页面中,如下所示:

// index.html
<script type="text/template" id="tpl-menu">
    <ul>
        <li><a href="#">List</a></li>
        <li><a href="#archive">Archive</a></li>
        <li class="right"><a href="#new">+</a></li>
    </ul>
</script>
登录后复制

由于它是一个脚本标记,因此不会向用户显示。从另一个角度来看,它是一个有效的 DOM 节点,因此我们可以使用 jQuery 获取其内容。因此,上面的简短片段仅获取该脚本标记的内容。

render 方法在 Backbone.js 中非常重要。这就是显示数据的函数。通常,您将模型触发的事件直接绑定到该方法。然而,对于主菜单,我们不需要这样的行为。

this.$el.html(this.template({}));
登录后复制

this.$el 是框架创建的一个对象,每个视图默认都有它(el 前面有一个 $ 因为我们包含了 jQuery)。默认情况下,它是一个空的 。当然,您可以使用 tagName 属性来更改它。但这里更重要的是,我们没有直接为该对象赋值。我们不会改变它,我们只是改变它的内容。上面一行和下一行有很大的区别:

this.$el = $(this.template({}));
登录后复制

重点是,如果你想在浏览器中看到变化,你应该先调用 render 方法,将视图附加到 DOM 中。否则只会附加空的 div。还有另一种情况,您有嵌套视图。而且由于您直接更改属性,因此父组件不会更新。绑定的事件也可能被破坏,您需要重新附加侦听器。因此,您实际上应该只更改 this.$el 的内容,而不是属性的值。

视图现已准备就绪,我们需要初始化它。让我们将其添加到我们的工厂模块中:

// App.js
var ViewsFactory = {
    menu: function() {
        if(!this.menuView) {
            this.menuView = new api.views.menu({ 
                el: $("#menu")
            });
        }
        return this.menuView;
    }
};
登录后复制

最后只需调用引导区域中的 menu 方法即可:

// App.js
init: function() {
    this.content = $("#content");
    this.todos = new api.collections.ToDos();
    ViewsFactory.menu();
    return this;
}
登录后复制

请注意,当我们从导航类创建新实例时,我们传递了一个已经存在的 DOM 元素 $("#menu")。所以,视图中的 this.$el 属性实际上指向 $("#menu")

添加路线

Backbone.js 支持推送状态操作。换句话说,您可以操纵当前浏览器的 URL 并在页面之间移动。但是,我们将坚持使用旧的哈希类型 URL,例如 /#edit/3

// App.js
var Router = Backbone.Router.extend({
    routes: {
        "archive": "archive",
        "new": "newToDo",
        "edit/:index": "editToDo",
        "delete/:index": "delteToDo",
        "": "list"
    },
    list: function(archive) {},
    archive: function() {},
    newToDo: function() {},
    editToDo: function(index) {},
    delteToDo: function(index) {}
});
登录后复制

上面是我们的路由器。哈希对象中定义了五个路由。键是您将在浏览器地址栏中键入的内容,值是将要调用的函数。请注意,其中两条路由上有 :index。如果您想支持动态 URL,则需要使用该语法。在我们的例子中,如果您输入 #edit/3 ,则 editToDo 将使用参数 index=3 执行。最后一行包含一个空字符串,这意味着它处理我们应用程序的主页。

显示所有任务的列表

到目前为止,我们构建的是我们项目的主视图。它将从集合中检索数据并将其打印在屏幕上。我们可以将相同的视图用于两件事 - 显示所有活动的待办事项和显示已存档的待办事项。

在继续列表视图实现之前,让我们看看它是如何实际初始化的。

// in App.js views factory
list: function() {
    if(!this.listView) {
        this.listView = new api.views.list({
            model: api.todos
        });
    }   
    return this.listView;
}
登录后复制

请注意,我们正在传递集合。这很重要,因为我们稍后将使用 this.model 来访问存储的数据。工厂返回我们的列表视图,但路由器是必须将其添加到页面的人。

// in App.js's router
list: function(archive) {
    var view = ViewsFactory.list();
    api
    .title(archive ? "Archive:" : "Your ToDos:")
    .changeContent(view.$el);
    view.setMode(archive ? "archive" : null).render();
}
登录后复制

目前,在路由器中调用方法 list ,不带任何参数。因此该视图不是 archive 模式,它只会显示活动的 ToDos。

// views/list.js
app.views.list = Backbone.View.extend({
    mode: null,
    events: {},
    initialize: function() {
        var handler = _.bind(this.render, this);
        this.model.bind('change', handler);
        this.model.bind('add', handler);
        this.model.bind('remove', handler);
    },
    render: function() {},
    priorityUp: function(e) {},
    priorityDown: function(e) {},
    archive: function(e) {},
    changeStatus: function(e) {},
    setMode: function(mode) {
        this.mode = mode;
        return this;
    }
});
登录后复制

渲染期间将使用 mode 属性。如果其值为 mode="archive" 则仅显示已存档的 ToDos。 events 是一个我们将立即填充的对象。这是我们放置 DOM 事件映射的地方。其余方法是用户交互的响应,它们直接链接到所需的功能。例如, priorityUppriorityDown 更改待办事项的顺序。 archive 将项目移动到存档区域。 changeStatus 只是将 ToDo 标记为已完成。

initialize 方法内部发生的事情很有趣。前面我们说过,通常您会将模型(在我们的例子中为集合)中的更改绑定到视图的 render 方法。您可以输入 this.model.bind('change', this.render)。但很快您就会注意到 this 关键字在 render 方法中不会指向视图本身。这是因为范围发生了变化。作为解决方法,我们正在创建一个具有已定义范围的处理程序。这就是 Underscore 的 bind 函数的用途。

这里是 render 方法的实现。

// views/list.js
render: function() {)
    var html = '<ul class="list">', 
        self = this;
    this.model.each(function(todo, index) {
        if(self.mode === "archive" ? todo.get("archived") === true : todo.get("archived") === false) {
            var template = _.template($("#tpl-list-item").html());
            html += template({ 
                title: todo.get("title"),
                index: index,
                archiveLink: self.mode === "archive" ? "unarchive" : "archive",
                done: todo.get("done") ? "yes" : "no",
                doneChecked: todo.get("done")  ? 'checked=="checked"' : ""
            });
        }
    });
    html += '</ul>';
    this.$el.html(html);
    this.delegateEvents();
    return this;
}
登录后复制

我们循环遍历集合中的所有模型并生成一个 HTML 字符串,稍后将其插入到视图的 DOM 元素中。很少有检查可以区分待办事项从已存档到活动。在复选框的帮助下,任务被标记为完成。因此,为了表明这一点,我们需要将 checked=="checked" 属性传递给该元素。您可能会注意到我们正在使用 this.delegateEvents()。在我们的例子中这是必要的,因为我们正在从 DOM 中分离和附加视图。是的,我们不会替换主元素,但事件的处理程序将被删除。这就是为什么我们必须告诉 Backbone.js 再次附加它们。上面代码中使用的模板是:

// index.html
<script type="text/template" id="tpl-list-item">
    <li class="cf done-<%= done %>" data-index="<%= index %>">
        <h2>
            <input type="checkbox" data-status <%= doneChecked %> />
            <a href="javascript:void(0);" data-up>&#8593;</a>
            <a href="javascript:void(0);" data-down>&#8595;</a>
            <%= title %>
        </h2>
        <div class="options">
            <a href="#edit/<%= index %>">edit</a>
            <a href="javascript:void(0);" data-archive><%= archiveLink %></a>
            <a href="#delete/<%= index %>">delete</a>
        </div>
    </li>
</script>
登录后复制

请注意,定义了一个名为 done-yes 的 CSS 类,它将 ToDo 绘制为绿色背景。除此之外,还有很多链接,我们将使用它们来实现所需的功能。它们都具有数据属性。元素的主节点li,有data-index。该属性的值显示任务在集合中的索引。请注意,包裹在 <%= ... %> 中的特殊表达式被发送到 template 函数。这就是注入到模板中的数据。

是时候向视图添加一些事件了。

// views/list.js
events: {
    'click a[data-up]': 'priorityUp',
    'click a[data-down]': 'priorityDown',
    'click a[data-archive]': 'archive',
    'click input[data-status]': 'changeStatus'
}
登录后复制

在 Backbone.js 中,事件的定义只是一个哈希值。您首先输入事件的名称,然后输入选择器。属性的值实际上是视图的方法。

// views/list.js
priorityUp: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.up(index);
},
priorityDown: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.down(index);
},
archive: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.archive(this.mode !== "archive", index); 
},
changeStatus: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.changeStatus(e.target.checked, index);       
}
登录后复制

这里我们使用 e.target 进入处理程序。它指向触发事件的 DOM 元素。我们正在获取单击的 ToDo 的索引并更新集合中的模型。通过这四个函数,我们完成了我们的课程,现在数据显示在页面上。

正如我们上面提到的,我们将为 Archive 页面使用相同的视图。

list: function(archive) {
    var view = ViewsFactory.list();
    api
    .title(archive ? "Archive:" : "Your ToDos:")
    .changeContent(view.$el);
    view.setMode(archive ? "archive" : null).render();
},
archive: function() {
    this.list(true);
}
登录后复制

上面是与之前相同的路由处理程序,但这次使用 true 作为参数。

添加和编辑待办事项

按照列表视图的入门,我们可以创建另一个显示用于添加和编辑任务的表单的列表视图。下面是这个新类的创建方式:

// App.js / views factory
form: function() {
    if(!this.formView) {
        this.formView = new api.views.form({
            model: api.todos
        }).on("saved", function() {
            api.router.navigate("", {trigger: true});
        })
    }
    return this.formView;
}
登录后复制

几乎一样。然而,这次表单提交后我们需要做一些事情。这会将用户转发到主页。正如我所说,每个扩展 Backbone.js 类的对象实际上都是一个事件调度程序。您可以使用 ontrigger 等方法。

在继续查看代码之前,让我们看一下 HTML 模板:

<script type="text/template" id="tpl-form">
    <form>
        <textarea><%= title %></textarea>
        <button>save</button>
    </form>
</script>
登录后复制

我们有一个 textarea 和一个 button。如果我们要添加新任务,该模板需要一个 title 参数,该参数应该是一个空字符串。

// views/form.js
app.views.form = Backbone.View.extend({
    index: false,
    events: {
        'click button': 'save'
    },
    initialize: function() {
        this.render();
    },
    render: function(index) {
        var template, html = $("#tpl-form").html();
        if(typeof index == 'undefined') {
            this.index = false;
            template = _.template(html, { title: ""});
        } else {
            this.index = parseInt(index);
            this.todoForEditing = this.model.at(this.index);
            template = _.template($("#tpl-form").html(), {
                title: this.todoForEditing.get("title")
            });
        }
        this.$el.html(template);
        this.$el.find("textarea").focus();
        this.delegateEvents();
        return this;
    },
    save: function(e) {
        e.preventDefault();
        var title = this.$el.find("textarea").val();
        if(title == "") {
            alert("Empty textarea!"); return;
        }
        if(this.index !== false) {
            this.todoForEditing.set("title", title);
        } else {
            this.model.add({ title: title });
        }   
        this.trigger("saved");      
    }
});
登录后复制

该视图只有 40 行代码,但它的工作效果很好。仅附加一个事件,即单击“保存”按钮。根据传递的 index 参数,渲染方法的行为有所不同。例如,如果我们正在编辑 ToDo,我们会传递索引并获取确切的模型。如果没有,则表单为空,并且将创建一个新任务。上面的代码中有几个有趣的点。首先,在渲染中,我们使用 .focus() 方法在渲染视图后将焦点带到表单上。应再次调用 delegateEvents 函数,因为表单可以分离并再次附加。 save 方法以 e.preventDefault() 开头。这会删除按钮的默认行为,在某些情况下可能会提交表单。最后,一旦一切完成,我们就会触发 saved 事件,通知外界 ToDo 已保存到集合中。

路由器有两种方法需要填写。

// App.js
newToDo: function() {
    var view = ViewsFactory.form();
    api.title("Create new ToDo:").changeContent(view.$el);
    view.render()
},
editToDo: function(index) {
    var view = ViewsFactory.form();
    api.title("Edit:").changeContent(view.$el);
    view.render(index);
}
登录后复制

它们之间的区别在于,我们传入一个索引,如果 edit/:index 路由匹配。当然,页面标题也会相应更改。

从集合中删除记录

对于此功能,我们不需要视图。整个工作可以直接在路由器的处理程序中完成。

delteToDo: function(index) {
    api.todos.remove(api.todos.at(parseInt(index)));
    api.router.navigate("", {trigger: true});
}
登录后复制

我们知道要删除的 ToDo 的索引。集合类中有一个 remove 方法,它接受模型对象。最后,只需将用户转发到主页,其中就会显示更新后的列表。

结论

Backbone.js 拥有构建功能齐全的单页应用程序所需的一切。我们甚至可以将其绑定到 REST 后端服务,框架将同步您的应用程序和数据库之间的数据。事件驱动方法鼓励模块化编程以及良好的架构。我个人在多个项目中使用 Backbone.js,并且效果非常好。

以上是Backbone.js 为单页 ToDo 应用程序提供支持的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板