时间戳

首页 > 解决方案 > Backbone 在第二次渲染调用后不更新模板

jquery - Backbone 在第二次渲染调用后不更新模板

问题描述

我有一个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()，我可以用更新的值验证最后一次调用 i，但是如果我更改输入值并触发keydown事件，我看不到更改，如果我再次触发它，那么我得到了，即使console.log(model)显示模型已经更新。

我的渲染函数如下所示：

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

但是，如果我将其包装在document.ready：

渲染：-> $(document).ready(() => @$el.html @template(model) )

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

我的猜测是，change事件可以被触发onkeydown，因此两者几乎同时执行，这会扰乱render()执行，但是我试图在change事件上延迟 1 秒以确保第一个render()在我拨打第二个电话之前，电话已结束。唉，这并没有改变输出我仍然没有更新我的模板。仅将其包装起来document.ready似乎可以解决问题，但我不知道为什么，因此我不确定这是问题的实际解决方案。

标签： jquerybackbone.js

解决方案

您似乎正在使用非委托 jQuery 事件侦听器，
$('.my-class').on 'keydown', (event) => @onKeydown(event).

在渲染视图/dom并且匹配元素可用之前，这将不起作用（即使视图在绑定时位于内存中，由主干创建的委托事件也将起作用）。
一旦使用新元素重新渲染视图，它也会停止工作，除非重新绑定完成。

^ 主干提供使用委托事件侦听器（事件哈希）的简单方法是有原因的。使用它应该可以解决问题

推荐阅读