1

我有一个包含多个输入字段的表单。更改输入中的值时，会重新呈现带有表单的视图。这是一段 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 键在下一个输入中设置焦点并且焦点丢失时，也会发生重新渲染。有没有可能用一小部分代码解决这个问题？

4

2 回答 2

3

您可以进行模型更新silent以防止重新渲染：

change: (event) ->
    ctrl  = @$(event.currentTarget)
    @model.set(ctrl.data('name'), ctrl.val(), {silent:'true'})
于 2014-06-10T15:36:06.803 回答
2

目前，每次发生任何变化时，您（本质上）都在重新渲染整个表单。理想情况下，更好的方法是对表单的不同部分使用不同的视图，并且仅根据更改的具体情况重新渲染实际需要渲染的部分。

但是，如果您正在寻找：

有可能用一小部分代码解决这个问题吗？

因此，您可以尝试另一种方法：修改渲染以执行以下操作：

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

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

当然，这假设所有涉及的元素都有 ID。如果没有，您要么需要向它们添加 ID，要么找到其他方法来跟踪关注的元素。例如，您可以执行类似的var focusedIndex = $('input').index();操作，但不要在没有首先测试的情况下使用它以确保索引保持一致，因为它可能不是（如果说页面上输入的数量或顺序发生变化）。

于 2013-05-15T20:40:10.593 回答