Question

我是parse.com环境中使用骨干的新手。我只是想编辑第二个模型对象，但我不知道如何打开第二个对象的编辑框。

目前的工作模式如下，我添加了“dblclick label.todo-job”：“edit1”，可以通过双击启动它。

events: {
      "click .toggle"              : "toggleDone",
      "dblclick label.todo-content" : "edit",
      "dblclick label.todo-job" : "edit1",
      "click .todo-destroy"   : "clear",
      "keypress .edit"      : "updateOnEnter",
      "blur .edit"          : "close"
    },

以下是允许编辑我的对象的功能。

edit1: function() {
  $(this.el).addClass("editing");
  this.input.focus();
},

但是，它只打开此对象“label.todo-content”进行编辑，而我想编辑“label.todo-job”。如何将焦点更改为新对象。

如果需要，可以使用整个代码。

  // The DOM element for a todo item...
  var TodoView = Parse.View.extend({

    //... is a list tag.
    tagName:  "li",

    // Cache the template function for a single item.
    template: _.template($('#item-template').html()),

    // The DOM events specific to an item.
    events: {
      "click .toggle"              : "toggleDone",
       "dblclick label.todo-content" : "edit",
      "dblclick label.todo-job" : "edit1",
      "dblclick label.todo-phone" : "edit2",
      "dblclick label.todo-email" : "edit3",
      "dblclick label.todo-website" : "edit4",
      "dblclick label.todo-address" : "edit5", 
      "click .todo-destroy"   : "clear",
      "keypress .edit"      : "updateOnEnter",
      "blur .edit"          : "close"
    },

    // The TodoView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a Todo and a TodoView in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
      _.bindAll(this, 'render', 'close', 'remove');
      this.model.bind('change', this.render);
      this.model.bind('destroy', this.remove);
    },

    // Re-render the contents of the todo item.
    render: function() {
      $(this.el).html(this.template(this.model.toJSON()));
      this.input = this.$('.edit');
      return this;
    },

    // Toggle the `"done"` state of the model.
    toggleDone: function() {
      this.model.toggle();
    },

    // Switch this view into `"editing"` mode, displaying the input field.
    edit: function() {
      $(this.el).addClass("editing");
      this.input.focus();
    },
        edit1: function() {
      $(this.el).addClass("editing");
      this.input.focus();
    },
        edit2: function() {
      $(this.el).addClass("editing");
      this.input.focus();
    },
        edit3: function() {
      $(this.el).addClass("editing");
      this.input.focus();
    },
        edit4: function() {
      $(this.el).addClass("editing");
      this.input.focus();
    },
        edit5: function() {
      $(this.el).addClass("editing");
      this.input.focus();
    },

    // Close the `"editing"` mode, saving changes to the todo.
    close: function() {
      this.model.save({content: this.input.val()});
      $(this.el).removeClass("editing");
    },

    // If you hit `enter`, we're through editing the item.
    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
    },

    // Remove the item, destroy the model.
    clear: function() {
      this.model.destroy();
    }

  });

以下是HTML中添加的对象。

<script type="text/template" id="item-template">
      <li class="<%= done ? 'completed' : '' %>">
  <div class="view">
    <li><label class="todo-content"><%= _.escape(content) %></label></li>
    <li><label class="todo-job"><%= _.escape(job) %></label></li>
    <li><label class="todo-phone"><%= _.escape(phone) %></label></li>
    <li><label class="todo-email"><%= _.escape(email) %></label></li>
    <li><label class="todo-website"><%= _.escape(web) %></label></li>
    <li><label class="todo-address"><%= _.escape(address) %></label></li>
    <li><label class="todo-postcode"><%= _.escape(postcode) %></label></li>
    <button class="todo-destroy"></button>
  </div>
  <input class="edit" value="<%= _.escape(content) %>">
  <input class="edit" value="<%= _.escape(content) %>"> /*I need to edit this instead of the object above this*/
      </li>
  </script>

Answer 1

事件触发最深的元素。这意味着事件处理函数的this不是您为事件侦听器选择的元素，而是实际事件发生的元素。我不知道parse.com，但我认为label.todo-content位于label.todo-job内。这使得事件处理程序的回调this变为label.todo-content。

所以如果你明确选择要聚焦的元素，它应该工作。仅供参考，Backbone View具有$（http://backbonejs.org/#View-dollar）和$el（http://backbonejs.org/#View- $ el）参数，以便在View.Since全局{{1}中使用jQuery方法。能够编辑每个控制器的视图区域上的任何元素，始终建议使用$。

this.$

<强> EDITED 我得到了你的问题。我不知道您是如何编写HTML代码的，但如果您的输入标签具有类名，则您提供的代码首先指向edit1: function() { this.$el.addClass("editing"); this.$("label.todo-job").focus(); },，

input

或者如果你知道有类/ id名称，你也可以这样做。

edit1: function() {
  this.$el.addClass("editing");
  this.$(".yourClassNameForInput").focus();
},

编辑骨干中的对象

1 个答案: