Question

我正在研究backbone.js，所以我决定使用backbone.js和localstorage插件制作mi自己的Todo应用程序。我已经有了Todo应用程序，您可以添加和删除待办事项，现在我正在努力使它们在完成和未完成的任务中排序。但问题是我无法找到办法。我在视图中创建了一个名为sort_done（）

的方法

    sort_done: function(){
    var done = this.collection.where({done: true});
    console.log(done);
}

但是我不知道如何才能更好地展示已完成或未完成的任务，我感谢有人能就如何管理这种“问题”给我一些建议。我也留下了模型，集合和视图js，所以你可以看看。

型号：

    var Task = Backbone.Model.extend({
    defaults:{
        title: "An empyt task..",
        done: false
    },

    validate: function(attrs){
        if(! $.trim(attrs.title)){
            return "The task has no title"
        }
    }
});

var task = new Task;

收集：

var Tasks = Backbone.Collection.extend({
model: Task,

localStorage: new Backbone.LocalStorage("todos-collection")
});

var tasks = new Tasks();

查看：

   var TaskView = Backbone.View.extend({
    tagName: "li",

    template: _.template( $('#task').html() ),

    initialize: function(){
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);
    },

    render: function(){
        var template = this.template( this.model.toJSON() );

        this.$el.html( template );

        return this;
    },

    events: {
        'click .icon-checkbox': 'toggleState',
        'click .task_title': 'editTask',
        'keypress .edit': 'updateOnEnter',
        'click  .close_btn': 'clear'
    },

    toggleState: function(e){
        var $checkbox = $(e.target);
        this.model.save('done', !this.model.get('done'));

    },

    editTask: function(e){
        this.task = $(e.target);
        this.editBox = this.task.next();
        this.editInput = this.editBox.find('.edit');

        $(".task_title").removeClass("display__none");
        $(".editBox").removeClass("edit_box__editing");
        this.task.addClass("display__none")
        this.editBox.addClass("edit_box__editing");
        this.editInput.attr('placeholder', this.task.text()).focus();
    },

    updateOnEnter: function(e){
        if(e.keyCode === 13){
            this.close();
        }
    },

    close: function(){
        var value = this.editInput.val();
        if(!value){
            this.task.removeClass("display__none")
            this.editBox.removeClass("edit_box__editing");
        }else{
            this.model.save({title: value});
            this.task.removeClass("display__none")
            this.editBox.removeClass("edit_box__editing");
        }
    },

    clear:function(){
        this.model.destroy();
    }
});

var TasksView = Backbone.View.extend({
    el: '#tasks',

    initialize: function(){
        this.render();
        this.collection.on('add', this.addOne, this);
        this.collection.on()
    },

    render: function(){
        this.collection.each(this.addOne, this);

        return this;

    },

    addOne: function(task){
        var taskView = new TaskView({ model: task });
        this.$el.append( taskView.render().el );
    }
});

var AddTask = Backbone.View.extend({
    el: '#todos',

    initialize: function(){
        this.collection.fetch();
    },

    events:{
        'click #add': 'addTask',
        'click #filter_done': 'sort_done',
        'keypress #inputTask': 'updateOnEnter'
    },

    addTask: function(){

        var taskTitle = $('#inputTask'). val();
        $('#inputTask').val(""); //clear the input

        if($.trim(taskTitle) === ''){//check if the input has some text in it
            this.displayMessage("Todo's can not be empty");
        }else{
            var task = new Task( {title: taskTitle} ); // create the task model
            this.collection.create(task); //add the model to the collection         
        }
    },

    displayMessage: function(msg){
        $('#inputTask').focus().attr("placeholder", msg);
    },

    updateOnEnter: function(e){
        if(e.keyCode === 13){
            this.addTask();
        }
    },

    sort_done: function(){
        var done = this.collection.where({done: true});
        console.log(done);
    }

});


var tasksView = new TasksView( {collection: tasks} );
var addTask = new AddTask( {collection: tasks} );

非常感谢你！

Answer 1

当您致电collection.where时，您的收藏品未被过滤，只会返回已过滤的模型（不会更改初始收藏品），因此对于您的问题，您必须这样做：

initialize: function(){
    this.render();
    this.collection.on('add', this.addOne, this);
    this.collection.on('reset', this.render, this); // here I change the event to reset
},

...

sort_done: function(){
    var done = this.collection.where({done: true});
    this.collection.reset(done);
    console.log(done);
}

如何在backbone.js中对项目进行排序

1 个答案: