如何改善我的骨干网代码

Question

I'm starting to develop in Backbone.js. And I still do not know how to write code using best practices.

My app is working but I have some issues, for example, the comparator does not work.

I would really help to make him better.

View:

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;
    }

});

Collection:

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;
  }

});

Model:

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

Router:

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();
});

Answer 1

Inside your views try to not have model or collection function like fetch or save or set.This is not a view responsibility.

Example : Instead of have this.collection.fetch() inside your collection, do something like this.

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);

Inside your collection, add a method to perform "fetch()" request. I don't understand why you're declaring the parse function.. you aren't doing anything.. I like to use parse function when I want change something that is in your JSON before backbone bind it to your model/collection.

I can't see where you're calling the comparator function.. maybe the 'sort' parameter is with an invalid value.

Inside your model you're using parse again.. I can't see a reason.

Your router is ok. I like your code.. for a beginner as you said. it's really good.

I recommend you use lo-dash instead of underscore... It have more options to work with arrays.

Try to use require.js to load your js dependencies.. It will help you a lot. www.requirejs.org

Hope it helps.