Question

我在这里遇到一些问题：

在我的Backbone.js应用中，我保存了可在模糊中编辑的内容的更改。这意味着，当按Tab键时，整个视图将被重新渲染，并且我将焦点放在下一个元素上。我怎样才能恢复这个？

Answer 1

您可以在视图中（作为普通属性，如下例中所示）或模型维护属性，以存储当前聚焦的元素。每当焦点发生变化时，请更新属性。

重新渲染内容后，手动将焦点设置为元素。

这是一个最小的代码：

var myView = Backbone.View.extend({
    el: $('#formElement'),

    initialize: function() {
        _.bindAll(this);
    }

    events: {
        'focus input': "updateFocus"
    },

    updateFocus: function(event) {
        this.focusedElem = $(event.target);
    },

    render: function() {
        // After rendering is complete
        this.focusedElem.focus();
    }
});

Answer 2

我为每个输入使用专用的ViewModel和View。它有一个特殊的readValue / writeValue方法，它们更新元素而不是重新创建它。它看起来像这样：

var TextInput = Backbone.Model.extend({ // abstract
    defaults: {
        value: '', // text
        visible: true, // determines if input element is visible
        readonly: false, // determines if input element is read only 
        enabled: true, // determines if input element is enabled
        delay: 750 // view/model sync latency
    }
});

var TextInputView = Backbone.View.extend({
    template: _.template($('#text-input').html()),
    initialize: function (options) {
        this.model.bind('change:visible', this.render, this);
        this.model.bind('change:readonly', this.render, this);
        this.model.bind('change:enabled', this.render, this);
        this.model.bind('change:value', this.readValue, this);
    },
    events: {
        'change input': 'writeValue',
        'keyup input': 'writeValue'
    },
    render: function () {
        $(this.el).html(this.template(this.model))
            .find('input')
                .prop({
                    readonly: this.model.get('readonly'),
                    disabled: !this.model.get('enabled')
                })
                .toggleClass('hidden', !this.model.get('visible'));

        this.readValue();
        return this;
    },
    changeTimer: null,
    writeValue: function () {
        if (this.changeTimer)
            clearTimeout(this.changeTimer);

        var that = this;
        this.changeTimer = setTimeout(function () {
            that.model.set({ value: that.$('input').val() });
        }, this.model.get('delay'));
    },
    readValue: function () {
        if (this.$('input').val() != this.model.get('value'))
            this.$('input').val(this.model.get('value'));
    }
});

Answer 3

我发现我希望它能够进入下一个＆＃34;渲染后的元素。此外，您无法记住JQuery中从DOM中删除的元素。所以我记录输入的名称而不是输入本身。结合以前的答案，您可以执行类似下面的操作。请记住，我有一些假设，比如输入上的名称和我在字段集中搜索的内容。

    getNextInputForName = function(desiredName) {
      var desiredElement = false;
        var foundElement;
        $("fieldset input").each(function(index) {
          if (desiredElement) {
              foundElement = $(this);
                return false;
            }
            if ($(this).attr("name") === desiredName) {
                desiredElement = true;
            }
        });
        return foundElement;
    }

    var myView = Backbone.View.extend({
      el: $('#formElement'),

      initialize: function() {
        _.bindAll(this);
      }

      events: {
        'focus input': "updateFocus"
      },

      updateFocus: function(event) {
        this.focusedElem = $(event.target).attr("name");
      },

      render: function() {
        // After rendering is complete
        if( this.focusedElem ) {
          getNextInputForName(this.focusedElem).focus();
        }
      }
    });

Backbone：渲染后恢复焦点

3 个答案: