如何改进我的主干代码答案

【问题标题】：How to improve my Backbone code如何改进我的主干代码
【发布时间】：2014-06-26 19:48:59
【问题描述】：

我开始使用 Backbone.js 进行开发。而且我仍然不知道如何使用最佳实践编写代码。

我的应用程序正在运行，但我遇到了一些问题，例如，比较器不工作。

我真的会帮助他变得更好。

查看：

Todos.Views.TasksView = Backbone.View.extend({

    template: JST['todos/index'],

    tagName: 'div',

    id: '#todos',


    initialize: function () {
        this.collection = new Todos.Collections.TasksCollection();

        this.collection.fetch({
            reset: true
        });

        this.render();

        this.listenTo(this.collection, 'reset', this.render);
        this.listenTo(this.collection, 'change', this.render);
        this.listenTo(this.collection, 'sort', this.render);

    },

    render: function () {
        $(this.el).html(this.template({
             tasks: tasks[0].task
        }));

        return this;
    }

});

收藏：

Todos.Collections.TasksCollection = Backbone.Collection.extend({

  model: Todos.Models.TasksModel
  url: "/api/tasks.json",
  comparator: function (sort) {
      return -(new Date(sort.get('eventTime'))).getTime();
  },

  parse: function (response) {
      return response;
  }

});

型号：

Todos.Models.TasksModel = Backbone.Model.extend({
  parse: function (response, options) {
      return response;
  }
});

路由器：

Todos.Routers.TasksRouter = Backbone.Router.extend({
  routes: {
      '': 'index'
  },
  initialize: function () {
      var viewTasks = new Todo.Views.TasksView({
          model: Todos.Models.TasksModel,
          el: '.tasks-list'
      });
  }
});

App.js：

window.Todos = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {},
    initialize: function () {
       new Todos.Routers.TasksRouter();
       Backbone.history.start({})
    },


$(document).ready(function () {
    Todos.initialize();
});

【问题讨论】：

the comparator does not work - 调试它并告诉我们它是如何不工作的。
不起作用 :( "sort" 只返回一项，但 json 有 5 个项。如果我尝试记录 sort.eventTime，则返回未定义。

标签： javascript backbone.js

【解决方案1】：

在您的视图中尽量不要有模型或集合功能，如 fetch、save 或 set。这不是视图的责任。

示例：不要在集合中包含 this.collection.fetch()，而是执行类似的操作。

this.collection = new Todos.Collections.TasksCollection();


    this.collection.getSomething();

    this.render();

    this.listenTo(this.collection, 'reset', this.render);
    this.listenTo(this.collection, 'change', this.render);
    this.listenTo(this.collection, 'sort', this.render);

在您的集合中，添加一个方法来执行“fetch()”请求。我不明白你为什么要声明 parse 函数..你什么也没做.. 当我想在主干将它绑定到模型/集合之前更改 JSON 中的某些内容时，我喜欢使用 parse 函数。

我看不到你在哪里调用比较器函数。也许“排序”参数的值无效。

在您的模型中，您再次使用 parse.. 我看不出原因。

你的路由器没问题。我喜欢你的代码..正如你所说的初学者。真的很好。

我建议你使用 lo-dash 而不是下划线...它有更多的选项来处理数组。

尝试使用 require.js 来加载你的 js 依赖项。它会对你有很大帮助。 www.requirejs.org

希望对你有帮助。

【讨论】：