1

バックボーンでぼかしアクションを使用しています。私のバックボーンビューでは

var EventView = Backbone.View.extend({

    tagName:  "li",

    template: _.template($('#item-template').html()),

    events: {
      "click .toggle"   : "toggleDone",
      "dblclick .view"  : "edit",
      "click a.destroy" : "clear",
      "keypress .edit"  : "updateOnEnter",
      "blur .edit"      : "close"
    },

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

    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      this.$el.toggleClass('done', this.model.get('done'));
      this.form = this.$(".edit");
      this.input = this.$(".edit-title");
      this.eventLeaders = this.$('.edit-leaders');
      this.eventDescription = this.$('.edit-description');
      return this;
    },

    toggleDone: function() {
      this.model.toggle();
    },

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

    close: function() {

      if (!this.input.val()) {
        this.clear();
      } else {
        this.model.save({
                    title: this.input.val(), 
                    description: this.eventDescription.val(),
                    leaders: this.eventLeaders.val().split(/[, ]+/)});
        this.$el.removeClass("editing");
      }
    },

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

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

});

私のHTMLには次のものがあります：

  <script type="text/template" id="item-template">
    <div class="view">
      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <label><%- title %></label>
      <div class="details">
        <span class="description"><p><%- description %></p>Leaders:</span>
        <% _.each(leaders, function(leader){ %>
          <span class="event-leader"> <%= leader %> </span>
        <% }); %>
      </div>
      <a class="destroy"></a>
    </div>
    <form class="edit">
      <input class="edit-title" type="text" value="<%- title %>" />
      <input class="edit-description" type="text" value="<%- description %>" />
      <input class="edit-leaders" type="text" value="<%= leaders.join(', ') %>" />
    </form>
  </script>

そして私のCSSには次のものがあります：

#event-list li.editing .edit {
    display: block;
    width: 444px;
    padding: 13px 15px 14px 20px;
    margin: -30px;
}

#event-list li.editing .view {
    display: none;
}
#event-list li .edit {
    display: none;
}

私が抱えている問題は、さまざまなテキストボックスの編集を切り替えるときにぼかしイベントが発生することです。その理由はわかりません。タブを使用してテキストボックスを切り替える場合でも。これをデフォルトの動作にしたくありません。どうすればこれを変更できますか?

4

1 に答える 1

1

eventsこのように -hashにセレクターがある場合

'blur <the event designator> .edit <the selector>': 'onBlur'

backbone.jsdelegateEventsは jQuery関数を使用して、このonようなイベントをバインドします

this.$el.on(eventName, selector, method);

ただし、関数とそのパラメーターに関するjQueryドキュメントから見つけることができる落とし穴があります。on

セレクタ

タイプ: 文字列

イベントをトリガーする選択された要素の子孫をフィルタリングするためのセレクター文字列。セレクターが null または省略されている場合、イベントは選択された要素に到達したときに常にトリガーされます。

どういうわけか、セレクターが含まれていると、イベントハンドラーは要素の子 (この場合は入力) から伝播するイベントをキャッチします。セレクターがないと、イベントはキャッチされません (デモを行うためにフィドルを作成し、コンソールを開いて、さまざまな入力を切り替えます)。フィドルをいじってみると、フォームにフォーカスがあるかどうかを検出することはほぼ不可能であることがわかりました。

これが、ぼかしイベントが入力フィールドによってトリガーされる理由です。フォームがいつフォーカスを失ったかを検出する方法については、ブラウザが自分自身でどの要素にフォーカスを与えるかを決定するため、言うのは難しいです。ここに私が見つけたいくつかのstackoverflowソースがありますが、フィドルで動作しませんでした:

jQuery を使用して、入力にフォーカスがあるかどうかをテストする

onblur が発生した場合、どの要素のフォーカスが *to* に移動したかを調べるにはどうすればよいですか?

于 2013-03-05T23:05:17.573 に答える