0

伙计们，考虑一下咖啡脚本中的以下视图：

window.Aview = class AView extends Backbone.View

  getT: (callback) =>
    callback()

  getTransactions: (callback) =>
    @getT( =>
      callback()
    )            
  render: =>
   @getTransactions(
     (results) =>
       $(@el).html(@template({}))
   )

这按预期呈现（如下所示）： 正确呈现选项卡

但是，如果我将getTransactions中的逻辑更改为使用window.db.transaction（window.db指向一个websql db变量），如下所示：

  getTransactions: (callback) =>
    window.db.transaction( =>
      callback()
    )

然后渲染搞砸了，如下所示：

当我们使用 window.db.transaction 时渲染不正确

我不确定为什么会这样。我认为这很可能不是使用backbonejs的方式，但我很好奇为什么当我使用window.db.transaction而不是本地定义的getT方法时jquery mobile tab的渲染会变得混乱。

谢谢你的帮助！

4

1 回答 1

0

我弄清楚了这个问题。正如我所怀疑的那样，我在多个层面上都做错了。这里的目标是呈现来自 websql 数据库的数据。问题是数据库数据通过回调异步返回。您的视图需要以某种方式“等待”直到数据完成。正确的方法是

  1. 使用 jquery deferreds（参见http://eng.wealthfront.com/2012/12/jquerydeferred-is-most-important-client.html文章）
  2. 在主干js视图的渲染方法中——使用常规主干js渲染机制渲染没有数据的页面
  3. 使用 jquery promise 接口渲染动态内容（查询异步返回的数据）： txnsLoadedPromise.then( // 在此处渲染动态内容 )
  4. 调用触发器创建以应用 jquery 增强功能（请参阅http://view.jquerymobile.com/1.3.0/docs/faq/injected-content-is-not-enhanced.php ）我搞砸 UI 的原因是因为jquery 增强需要以编程方式应用于动态 DOM 元素。
于 2013-03-01T16:56:00.130 回答