将查询布局与反应式模板 + 异步数据源集成的好方法？答案

【问题标题】：Good way to integrate query-layout with reactive templates + async data sources?将查询布局与反应式模板 + 异步数据源集成的好方法？
【发布时间】：2012-05-25 10:36:59
【问题描述】：

我正在开发一个从 Facebook 获取数据的 Meteor 应用程序，我想使用 jquery-layout 进行演示。我怀疑在尝试使用 jquery 修改响应式模板中的 HTML 时可能存在一些“微妙之处”，所以我设置了一个相对简单的测试用例，类似于这样（为简洁起见）...

<body>
{{> mainTemplate}}
</body>

<template name="mainTemplate">
  {{#with userInfo}}  
  {{> partialNorth}}  
  {{> partialWest}}  
  {{> partialCenter}}  
  {{> partialEast}}  
  {{/with}}  
  {{layItOut}}  
</template>

Template.mainTemplate.userInfo 返回 Session 变量的内容，该变量以默认值开头，并使用来自 Facebook 的信息异步更新。

Template.mainTemplate.layItOut 使用回调 fcn 设置对 Meteor.defer 的调用，该回调 fcn 实际执行 5 行 jquery-layout 代码。

而且这似乎工作得很好......

初始显示符合预期/预期（尽管有一段短暂的时间页面没有布局）
对响应式上下文的任何更新都会导致重新执行布局（同样，w/brief-but-visible re-layout）

那么，我为什么发牢骚？大多数情况下，我想找到一种更简洁的方法来消除明显的重新布局活动。

我可以使反应式上下文更加精细，但我不确定这是否真的有帮助。

或者，我想我可以尝试直接控制渲染（例如，通过 Meteor.ui.render() ，但这听起来需要做很多工作 ;-)

我想我真正想要的是要么

a) 一种挂钩 Meteor 渲染事件的方法

或者更好

b) 一种更简洁的方式将查询布局连接到模板

想法？

【问题讨论】：

这是一个棘手的问题。我不确定 jQuery Layout 在幕后做了什么。我个人的印象是它必然会导致额外的闪烁，因为它在代码中做的事情你可以用绝对定位的纯 CSS 做（从 IE7 开始）。

标签： facebook-javascript-sdk meteor handlebars.js jquery-layout

【解决方案1】：

因此，我设法对自己进行了足够的教育，以回答我自己的问题，以防其他人发现它有用。底线是我在几个层面上都错了。使反应上下文更细化是答案（或至少一个答案）。

在我给出的示例中，我通过将所有渲染放在#each 构造中来使整个页面具有响应性。我现在要做的是尝试使反应上下文尽可能小，以便在任何反应更改时仅重新呈现页面的（相对）一小部分，并且包含所有反应元素低于（或方式）jquery ui 元素的级别。

也就是说，像这样的：

<body>
{{> mainTemplate}}
</body>

<template name="mainTemplate">

~~{{#with userInfo}}~~

{{> partialNorth}} 
{{> partialWest}}  
  ...

~~{{/with}}~~

  {{layItOut}}  
</template>  

<template name="partialNorth">
  <div class="ui-layout-north">  <-- definition for jquery-layout north panel
    <h1>This is the north pane</h1>
    <p>The user data go next:</p><br />
    {{> templateUserData}}
  </div>
</template>

<template name="templateUserData">
  <div>
    {{#with theUserData}}  <-- Assumes a helper function 'theUserData' for this template
      <p>First name: {{first_name}}</p>
      <p>Last name: {{last_name}}</p>
      ...
    {{/with}}
  </div>
</template>

一旦你在 jquery ui 元素下面有了反应性元素（到目前为止，我已经尝试过使用面板、选项卡、手风琴、按钮和弹出窗口），整个事情就像它在闪亮的小册子中所说的那样工作！ ;-)

【讨论】：