Question

我有渲染集合的问题。它的标题和标题布尔'完成'的简单模型，当你点击列表项时它会改变为完成值（真/假）。值已更改（我知道，因为当我刷新页面时，在fetch（）之后的初始化中，我有collection.pluck，其中比较器的顺序是正确的），但视图始终看起来相同。

在集合中我有比较器，就像我在上面描述的那样工作，在collection.fetch（）之后我有采摘，并且pluck给了我很好的排序列表（但是在视图中我看到不好，默认顺序）。我不知道如何刷新集合以进行良好的排序。

收藏只是：

var TodolistCollection = Backbone.Collection.extend({
    model: TodoModel,

  localStorage: new Store('todos-backbone'),


  // Sort todos
  comparator: function(todo) {
    return todo.get('completed');
  }
});

模型是：

    var TodoModel = Backbone.Model.extend({
      defaults: {
        title: '',
        completed: false
      },

      // Toggle completed state of todo item
      toggle: function(){
        this.save({
          completed: !this.get('completed')
        });
      }

    });

    return TodoModel;

单个todoView是：

var TodoView = Backbone.View.extend({
        tagName: 'li',

        template: JST['app/scripts/templates/todoView.ejs'],

        events: {
            'click .js-complete': 'toggleCompleted'
        },

        initialize: function(){
            this.listenTo(this.model, 'change', this.render);
        },

        render: function() {
            this.$el.html( this.template( this.model.toJSON() ));
            this.$el.toggleClass( 'l-completed', this.model.get('completed') );
            return this;
        },

        // Toggle the `"completed"` state of the model.
        toggleCompleted: function() {
            this.model.toggle();
        }

和app查看：

var ApplicationView = Backbone.View.extend({

        el: $('.container'),

        template: JST['app/scripts/templates/application.ejs'],

        events: {
          'click #add'        : 'createOnEnter',
          'keypress #addTodo' : 'createOnEnter'
        },

        // aliasy do DOMu,
        // nasluchiwanie w kolekcji czy zaszlo jakies zdarzenie, jesli tak, to wykonuje funkcje
        initialize: function() {
          this.$input = this.$('.js-input');

          this.listenTo(todoList, 'add', this.addOne);
          this.listenTo(todoList, 'reset', this.addAll);
          this.listenTo(todoList, 'all', this.render);

          todoList.fetch();

          console.log(todoList.pluck('title'));
        },

        render: function() {

        },

        // Generate the attributes for a new Todo item.
        newAttributes: function() {
          return {
            title: this.$input.val().trim(),
            completed: false
          };
        },

        // Tworzy nowy model dzieki newAtributes() do localStorage
        addTodo: function ( e ) {
          e.preventDefault();
          if( e.which !== Common.ENTER_KEY || !this.$input.val().trim() ){
            return;
          }

          todoList.create( this.newAttributes() );

          this.$input.val('');
        },

        // Tworzy model i dopisuje go do listy
        addOne: function( todo ){
          var view = new todoView({ model: todo });
          $('.js-todolist').append( view.render().el );
        },

        // Tworzy nowego todo gdy nacisniemy enter
        createOnEnter: function( e ) {
          if( e.which !== Common.ENTER_KEY || !this.$input.val().trim() ){
            return;
          }

          todoList.create( this.newAttributes() );
          this.$input.val('');
        },

        // Przy rerenderze, dodaj wszystkie pozycje
        addAll: function() {
          this.$('.js-todolist').html('');
          todoList.each(this.addOne, this);
        }

    });

    return ApplicationView;

当我改变listenTo渲染时：this.listenTo（todoList，'all'，function（）{console.log（'whateva'）}）;我可以看到点击“全部”触发（每次点击甚至三次; s）。

我很难把它放在jsfiddle上，但这里是所有文件的git链接：https://github.com/ozeczek/ozeczek/tree/master/bb-todo-yo/app/scripts

Answer 1

在app视图中初始化我已将todoList.fetch（）更改为todoList.fetch（{reset：true}）;

第二个问题是以浏览器的正确顺序显示todos，我已添加初始化：

this.listenTo(todoList, 'change', this.walcze);
this.listenTo(todoList, 'remove', this.walcze);

和walcze的身体功能是：

walcze: function(){

          todoList.sort();

          this.$('.js-todolist').html('');
          todoList.each(this.addOne, this);
        }

现在每次Todo paremeter完成更改，Im排序列表（比较器本身不是），清除div与列表，并重写整个列表。我认为这不是最好的方式，但它确实有效。

Backbone集合不呈现

1 个答案: