第二渲染调用后，骨干不更新模板

Posted 2021-05-05

我有一个观点Backbone和我使用Handlebars创建渲染方法模板。

在我看来，我有一个变量：

model  = [
        {key: '1', value: 'a'},
        {key: '2', value: 'b'},
        {key: '3', value: 'c'},
        {key: '4', value: 'd'}
       ]

我显示几种输入和具有监听以下事件：

'change input' : 'onInputChange'
$('.my-class').on 'keydown', (event) => @onKeydown(event)

因此，这是工作的罚款。当change事件被触发，我有一些逻辑根据新输入的值更新模型。这里是哪里出了问题来了。

这两起事件都呼吁render()，我可以确认最后一个电话我更新后的值，但是如果我改变输入值，并触发keydown事件中，我没有看到变化，如果我再次触发它，然后我得到，甚至虽然console.log(model)表明，该模型已经被更新。

我的渲染功能如下：

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

但是，如果我在document.ready这个包起来：

渲染： - > $（文件）。就绪（（）=> @ $ el.html @Template（型号））

然后我的模板被正确更新。

我的猜测是，事实change事件可以触发这样既onkeydown执行在同一时间几乎与render()执行弄乱了，但是我试图把1秒的延迟对change事件中为了确保我做第二次调用之前render()第一个呼叫已完成。唉这并没有改变输出，我还是没有得到我的模板进行更新。只有在document.ready包裹它似乎解决了问题，但我不知道为什么这样，我不知道这是实际的解决prbolem。

答案

你似乎是使用非授权jQuery的事件侦听器， $('.my-class').on 'keydown', (event) => @onKeydown(event)。

这将无法正常工作，直到视图/ DOM渲染和匹配的元素都可以（通过骨干创建将工作，即使观点是在内存中的结合时间委派事件）。 它也将停止工作，一旦视图进行重新渲染与新的元素，除非重新绑定完成。

^有一个骨干原因提供使用委托的事件监听器（事件散列）简单的方法。使用它应该解决的问题