0

我正在开发一个从 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) 一种将查询布局连接到模板的更简洁的方法

想法？

4

1 回答 1

0

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

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

即，像这样：

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

<template name="mainTemplate">

{{#with userInfo}} 

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

{{/和}}

  {{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 元素下面有了反应元素（到目前为止我已经用面板、选项卡、手风琴、按钮和弹出窗口尝试了它），整个事情就像它在闪亮的小册子中所说的那样工作！;-)

于 2012-06-13T18:31:47.457 回答