Javascript 我什么时候需要backbone.js中的模型？

我是Backbone.js的新手，是从js开发的“标准”模型中走出来的人，我有点不确定如何使用这些模型（或何时使用）

视图看起来非常明显，因为它模拟了大多数JS开发人员熟悉的典型的“侦听事件并执行某些操作”方法

我构建了一个简单的待办事项列表应用程序，但到目前为止还没有看到对

模型

方面的需求，因此我很好奇是否有人能给我一些见解，让我了解如何将其应用到这个应用程序中，或者如果我使用更复杂的数据，它是否会发挥作用

以下是JS：

Todos = (function(){

    var TodoModel = Backbone.Model.extend({

      defaults: {
          content: null
      }

    });

    var TodoView = Backbone.View.extend({

      el: $('#todos'),
      newitem: $('#new-item input'),
      noitems: $('#no-items'),

      initialize: function(){
        this.el = $(this.el);
      },

      events: {
        'submit #new-item': 'addItem',
        'click .remove-item': 'removeItem'
      },

      template: $('#item-template').html(),

      addItem: function(e) {
        e.preventDefault();
        this.noitems.remove();
        var templ = _.template(this.template);
        this.el.append(templ({content: this.newitem.val()}));
        this.newitem.val('').focus();
        return this;
      },

      removeItem: function(e){
        $(e.target).parent('.item-wrap').remove();
      }

  });

  self = {};
  self.start = function(){
    new TodoView();
  };
  return self;

});

$(function(){

    new Todos(jQuery).start();

});

---

在这里运行：

如果您想在服务器端保存任何内容，该模型将非常有用。主干网的模型是围绕RESTful端点构建的。因此，例如，如果您将URL root设置为

lists

，然后将列表信息存储在模型中，那么模型

save

和

fetch

方法将允许您在

lists/

端点向服务器保存/接收描述模式的JSON。即：

   ToDoListModel = Backbone.model.extend( {
         urlRoot : "lists/" } );

   // Once saved, lives at lists/5
   list = new ToDoListModel({id: 5, list: ["Take out trash", "Feed Dog"] });
   list.save();

因此，您可以使用它通过RESTful接口与服务器上持久存在的数据进行交互。有关更多信息，请参阅。

当您必须将更改持久化到服务器时，需要使用和

例如：

var todo = new TodoModel();

创建一个新模型。当您必须保存更改时，请致电

todo.save();

您还可以将成功和错误回调传递给。Save是jQuery提供的ajax函数的包装器

如何在应用程序中使用模型。

向模型中添加url字段

var TodoModel = Backbone.Model.extend({

  defaults: {
      content: null
  },
  url: {
      "http://localhost";  
  }

});

创建模型并保存它

addItem: function(e) {
        e.preventDefault();
        this.noitems.remove();
        var templ = _.template(this.template);
        this.el.append(templ({content: this.newitem.val()}));
        this.newitem.val('').focus();
        var todo = new TodoModel({'content':this.newitem.val()});
        todo.save();
        return this;
      },

确保服务器正在运行并正确设置url

学习资源：

• 查看主干网的源代码，以获得一个优秀的 解释事情是如何在幕后发生的
• 有许多优秀资源和示例应用程序的链接

---

我不同意只需要

模型

来保存更改的观点（我在这里包括本地存储，而不仅仅是服务器）

拥有模型和集合的表示形式很好，这样您就可以使用对象，而不仅仅是视图。在您的示例中，您只是在页面中添加和删除div（html），这是使用jQuery通常可以做的事情。每次“添加”时创建一个

模型并将其添加到
集合中
，清除后可能会将其删除，这将为您带来一些好处，例如排序（按字母顺序）或过滤（如果您想实现“完成”待办事项的概念）

在您的代码中，例如：

var TodoModel = Backbone.Model.extend({
    defaults: {
        content: null
        complete: false
    }
});

var Todos = Backbone.Collection.extend({
    model: TodoModel
})

在视图中（跳过不相关的代码）：

初始化如下：

self.start = function(){
    new TodoView(new Todos());
};

_setDone: function (ev) {
    // you will need to scope properly or "this" here will refer to the element clicked!
    todo = this.collection.get($(ev.currentTarget).attr('todo_id')); // if you had the accuracy to put the id of the todo somewhere within the template
    todo.set('complete', true);
    // some code here to re-render the list
    // or remove the todo single view and re-render it
    // in the simplest for just redrawr everything
    this.el.html('');
    _.each(this.collection, function (todo) {
        this.el.append(templ({model: todo}));
    });
}

现在你有了一个支持集合，你可以做各种事情，比如过滤。假设您有一个用于筛选已完成待办事项的按钮，您将钩住此处理程序：

_filterDone: function (ev) {
    filtered = this.collection.where({ complete: true });
    this.el.html(''); // empty the collection container, I used "el" but you know where you are rendering your todos
    _.each(filtered, function (todo) {
        this.el.append(templ({model: todo})); // it's as easy as that! :)
    });
}

请注意，如果将事件连接到内部视图，清空容器可能不是最好的方法，但作为启动程序，这可以正常工作

您可能需要一个钩子来设置todo done。创建一个按钮或复选框，可能还有如下功能：

self.start = function(){
    new TodoView(new Todos());
};

_setDone: function (ev) {
    // you will need to scope properly or "this" here will refer to the element clicked!
    todo = this.collection.get($(ev.currentTarget).attr('todo_id')); // if you had the accuracy to put the id of the todo somewhere within the template
    todo.set('complete', true);
    // some code here to re-render the list
    // or remove the todo single view and re-render it
    // in the simplest for just redrawr everything
    this.el.html('');
    _.each(this.collection, function (todo) {
        this.el.append(templ({model: todo}));
    });
}

如果没有模型和集合，上面的代码就不会那么容易，正如您所看到的，它与服务器没有任何关系。
我正在考虑使用
localStorage
作为维护数据的机制，这对model来说是一个很好的用例吗？主干网本身不支持本地存储，但有一些插件可以这样做：是的，这就是我计划使用的。那么，在视图中保留用于设置/获取本地存储的命令，或者将其放在模型中，这有意义吗？好的，这似乎是合乎逻辑的。因此，代码将使用模型结构创建todo，然后将其传递给url。很简单，谢谢你的详细介绍！我从回答中得到的是，在使用上有一定的灵活性——但最佳实践是在需要处理DOM操作之外的数据时使用模型。这正是我的观点！）我想添加答案，因为其他答案都集中在服务器端同步上，这只是完全使用模型和集合的优点之一。