Question

这是我第一次使用骨干，所以我对一切都很困惑。我正在尝试做一个待办事项列表。一旦我点击todo上的“完成”，我希望它附加到“已完成”列表。

我一直在关注这个教程，我试图复制代码（我试图创建一个新的completedTodo视图和类似的东西），我试图做点击“完成”它会删除$ el，我会添加到completedTodos。我认为这里的问题即使它被添加了，它也没有做任何事情。

  done: function() {
var completed = new CompletedTodo({
  completedTask: this.$('.task').html(),
  completedPriority: this.$('.priority').html()
});
completedTodos.add(completed);
this.model.destroy();

}，

我在那里放了一个调试器，看看它是否真的添加到了集合中，当我完成了CompleteTodos.toJSON（）;时，它确实给了我刚刚添加的新东西。

但是，它不会附加到我的收藏列表中。

这是我的整个脚本文件，以防我说错了。

    var Todo = Backbone.Model.extend({
  defaults: {
    task: '',
    priority: ''
  }
});

var CompletedTodo = Backbone.Model.extend({
  defaults: {
    completedTask: '',
    completedPriority: ''
  }
});

var Todos = Backbone.Collection.extend({});

var todos = new Todos();

var CompletedTodos = Backbone.Collection.extend({});

var completedTodos = new CompletedTodos();

//Backbone view for one todo
var TodoView = Backbone.View.extend({
  model: new Todo(),
  tagName: 'tr',
  initialize: function() {
    this.template = _.template($('.todos-list-template').html());
  },
  events: {
    'click .finished-todo': 'done',
    'click .delete-todo' : 'delete'
  },
  done: function() {
    var completed = new CompletedTodo({
      completedTask: this.$('.task').html(),
      completedPriority: this.$('.priority').html()
    });
    completedTodos.add(completed);
    this.model.destroy();
  },
  delete: function() {
    this.model.destroy();
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

//Backbone view for all todos
var TodosView = Backbone.View.extend({
  model: todos,
  el: $('.todos-list'), 
  initialize: function() {
    this.model.on('add', this.render, this);
    this.model.on('remove', this.render, this);
  },
  render: function() {
    var self = this;
    this.$el.html('');
    _.each(this.model.toArray(), function(todo) {
      self.$el.append((new TodoView({model: todo})).render().$el);
    });
    return this;
  }
});

//View for one Completed Todo
var CompletedTodoView = Backbone.View.extend({
  model: new CompletedTodo(),
  tagName: 'tr',
  initialize: function() {
    this.template = _.template($('.completed-todos-template').html());
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

//View for all Completed Todos
var CompletedTodosView = Backbone.View.extend({
  model: completedTodos,
  el: $('.completed-todos-list'), 
  initialize: function() {
    this.model.on('add', this.render, this);
  },
  render: function() {
    var self = this;
    this.$el.html('');
    _.each(this.model.toArray(), function(completedTodo) {
      self.$el.append((new CompletedTodoView({model: completedTodo})).render().$el);
    });
    return this;
  }
});

var todosView = new TodosView();

$(document).ready(function() {
  $('.add-todo').on('click', function() {
    var todo = new Todo({
      task: $('.task-input').val(),
      priority: $('.priority-input').val()
    });
    $('.task-input').val('');
    $('.priority-input').val('');
    todos.add(todo);
  });
});

在此之后，我还必须弄清楚如何使用Parse使其持久化到数据库。我想我首先要在骨干网上工作，然后尝试放入数据库。我也想使用node / express，那会有帮助吗？我几乎是一个Ruby on Rails的人，所以我真的不知道这些javascript框架类型的东西。

感谢您的帮助！

Answer 1

好的，

这只是因为我没有初始化视图。

var completedTodosView = new CompletedTodosView();

这解决了它。

Backbone：将模型移动到另一个Collection

1 个答案: