Question

我有一个包含多个输入字段的表单。更改输入中的值时，带有表单的视图将重新呈现。这是一些Backbone.View代码：

initialize: ->
    @model.on('change', @render, @)

events:
    'change input': 'change'

change: (event) ->
    ctrl  = @$(event.currentTarget)
    @model.set(ctrl.data('name'), ctrl.val())

render: ->
    @$el.html(@template(@model.toJSON()))

但是当我按Tab键在下一个输入中设置焦点并且焦点丢失时，也会发生重新渲染。是否有可能用一小部分代码来解决这个问题？

Answer 1

您可以让模型更新silent以防止重新呈现：

change: (event) ->
    ctrl  = @$(event.currentTarget)
    @model.set(ctrl.data('name'), ctrl.val(), {silent:'true'})

Answer 2

目前，您（实质上）每次更改时都会重新呈现整个表单。理想情况下，更好的方法是对表单的不同部分使用不同的视图，并根据更改的细节仅重新渲染实际需要渲染的部分。

但是，如果您正在寻找，这并没有多大帮助：

是否可以用一小部分代码解决这个问题？

因此，您可以尝试不同的方法：修改渲染以执行以下操作：

render: ->
    focusedElementId = $(':focus').attr('id');
    @$el.html(@template(@model.toJSON()))
    $('#' + focusedElementId).focus();

换句话说，在每个渲染存储中，哪个元素被聚焦（或者更确切地说，它的ID，因为该元素将作为渲染的一部分消失），然后在渲染后恢复该焦点。

当然，这假设所涉及的所有元素都有ID。如果他们不这样做，您将需要向他们添加ID或找到一些其他方式来跟踪哪个元素被聚焦。例如，您可以执行var focusedIndex = $('input').index();之类的操作，但不要先测试而不先测试，以确保索引保持一致，因为它可能不是（如果页面上的输入的数量或顺序更改））。

Backbone：视图重新渲染后输入焦点丢失

2 个答案: