backbone.js - 示例todo应用程序更改

时间:2013-11-18 18:50:45

标签: javascript backbone.js

sample app中如何根据“fetch()”返回的集合大小,在输入字段中更改标签“需要做什么”?

我提出了fiddle,其中我更改了模板以从“变量”字段获取字段的标签 传入第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返回零项的集合,我如何将标签('变量'中的var)更改为不同的值,并在UI中反映新值。

喜欢“你没有TODO项目”。

1 个答案:

答案 0 :(得分: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);
    }
});