概述
想象一下，你正在使用一个电子表格工具。首先创建一个叫做联系人的表单（也就是一个集合），然后定义表单中的数据域标题，在标题中输入"first name", "last name" 和 "phone" （一个模型）。基本上，你已经有了一个保管联系数据的电子表单（{firstName:"Jane, lastName:"Doe", phone:"111-111-1111"})。现在你想要从表单中使用这些信息创建一个UI（一个视图）来查看/添加/删除联系人。Backbone能 够做到！让我们开始吧！
继承Backbone.Model，创建Contact函数/类
- var Contact = Backbone.Model.extend({
- defaults: {
- firstName: null,
- lastName: null,
- phone: null
- },
- getFullName: function(){
- return this.get("firstName") +" "+ this.get("lastName");
- }
- });
实例化contacts集合，传递一个模型构造函数/分类与一个联系人
- var contacts = new Backbone.Collection({ //为其添加一些数据
- firstName: "Jane",
- lastName: "Doe",
- phone: "111-111-1111"
- }, {
- model: Contact
- });
继承Backbone.View，创建AddContactsView，实例化一个实例
- var ContactListView = Backbone.View.extend({
- el: "#contacts",
- events: {
- "click li button": "removeContact"
- },
- initialize: function () {
- this.render(); //渲染列表
- this.listenTo(contacts, "add remove", this.render); //the magic
- },
- removeContact: function (e) {
- $(e.target).parent("li").remove();
- contacts.findWhere({
- firstName: $(e.target).parent("li").find("span").text().split(" ")[0].trim(),
- lastName: $(e.target).parent("li").find("span").text().split(" ")[1].trim()
- }).destroy(); //将调用内部 "remove"事件
- },
- render: function () {
- if (contacts.length > 0) {
- this.$el.empty();
- contacts.each(function (contact) {
- this.$el.append("<li><span>" + contact.getFullName() + "</span>"+" / "+ contact.get("phone") + "<button type="button" class="btn-xs btn-danger removeContactBtn">X</button></li>");
- }, this);
- }
- }
- });
- var contactListViewInstance = new ContactListView();
继承Backbone.View，创建ContactListView，实例化一个实例
- var AddContactsView = Backbone.View.extend({
- el: "fieldset",
- events: {
- "click button": "addContact"
- },
- addContact: function () {
- var firstName = this.$("#firstName").val();
- var lastName = this.$("#lastName").val();
- var phone = this.$("#phone").val();
- if (firstName && lastName && phone) {
- contacts.add({ //将调用Backbone内部 "add"事件
- firstName: firstName,
- lastName: lastName,
- phone: phone
- });
- this.$("input").val("");
- }
- }
- });
- var addContactsViewInstance = new AddContactsView();
实例示范
下面是本小节关于联系人应用程序的工作演示。检查应用程序代码，直到完全理解创建过程中每一部分(即模型、收集、视图)的角色和功能。需要参考前几个小节的内容。
结论
这篇文章指导读者彻底了解Backbone视图，模型和集合。在本文的下一部分，我们将尝试同步以及将同步模型的方法与集合关联到后台。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索实例
， backbone
， this
， phone
， contacts
， 一个
， li的简单应用
js联系人删除按钮
，以便于您获取更多的相关知识。