todo应用程序更改示例

Question

在示例应用程序中，我如何根据"fetch（）"返回的集合的大小更改输入字段中的标签"What needed to be done"？？

我拿出了一把小提琴，在小提琴中我改变了模板，从"变量"字段中获得了字段的标签在第168行传递到模板。

initialize: function() {
  var self = this;
    var variables = { input_label : "Que needs to be done" };  
  _.bindAll(this, 'addOne', 'addAll', 'addSome', 'render', 'toggleAllComplete', 'logOut', 'createOnEnter');
  // Main todo management template
  this.$el.html(_.template($("#manage-todos-template").html(), variables)); // line 168
  this.input = this.$("#new-todo");
  this.allCheckbox = this.$("#toggle-all")[0];
  // Create our collection of Todos
  this.todos = new TodoList;
  // Setup the query for the collection to look for todos from the current user
  this.todos.query = new Parse.Query(Todo);
  this.todos.query.equalTo("user", Parse.User.current());
  this.todos.bind('add',     this.addOne);
  this.todos.bind('reset',   this.addAll);
  this.todos.bind('all',     this.render);
  // Fetch all the todo items for this user
  this.todos.fetch();   //line 185
  state.on("change", this.filter, this);
},

在第185行上运行fetch（）之后，我可以在collection.length上进行分支（参见第252行），但此时我无法更改UI（#new todo）。

// Add all items in the Todos collection at once.
addAll: function(collection, filter, variables) {
    if(collection.length > 1)console.log("Exists " );  //line 252
  this.$("#todo-list").html("");
  this.todos.each(this.addOne);
},

如果fetch返回一个零项的集合，我如何将标签（variables中的var）更改为不同的值，并在UI中反映该新值。

比如"您没有TODO项目"。

Answer 1

在ManageTodosView中添加一个侦听器，以侦听TodoList上的重置事件，并根据您需要的任何逻辑更新标签：

var ManageTodosView = Parse.View.extend({
    initialize: function () {
        ...
        this.listenTo(this.todos, 'reset', this.updateLabel);
        ...
    },
    updateLabel: function () {
        var label = this.todos.length === 0 ? 'label for zero todos' : 'label for non-zero todos';
        this.$el.find('whatever selector you need here').val(label);
    }
});