0

コレクションのレンダリングに問題があります。タイトルとブール値が「完了」の単純なモデルで、リスト項目をクリックすると完了値 (true/false) に変わります。値が変更されます (ページを更新すると、fetch() の後の初期化で collection.pluck があり、コンパレータによる順序が正しいため)、ビューは常に同じに見えます。

コレクションには、上で説明したように機能するコンパレーターがあり、collection.fetch() の後、pluck を使用すると、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();
        }

およびアプリ ビュー:

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')}); クリックすると「すべて」がトリガーされていることがわかります（1回のクリックで3回でも;s）。

jsfiddle に置くのは難しいですが、ここにすべてのファイルの git リンクがあります: https://github.com/ozeczek/ozeczek/tree/master/bb-todo-yo/app/scripts

4

1 に答える 1

1

アプリ ビューの初期化で、todoList.fetch() を todoList.fetch({reset:true}); に変更しました。

2 番目の問題は、ブラウザーで todos の正しい順序を表示することでした。初期化するために追加しました。

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

ワルツェ体関数は次のとおりです。

walcze: function(){

          todoList.sort();

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

Todo パラメータが完全に変更されるたびに、リストをソートし (コンパレータ自体はそうではありません)、リストで div をクリアし、リスト全体を書き換えます。それは最善の方法ではないと思いますが、うまくいきます。

于 2013-09-14T13:00:25.657 に答える