Question

我正在开发一款从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使用一个实际执行5行jquery-layout代码的回调函数fcn设置对Meteor.defer的调用。

这看起来效果很好......

初始显示符合预期/预期（尽管页面未布置的时间很短）
对反应性上下文的任何更新都会导致布局的重新执行（同样，具有简短但可见的重新布局）

那么，我为什么抱怨？大多数情况下，我希望找到一种更清晰的方法来消除明显的重新布局活动。

我可以使反应性上下文更精细，但我不确定这会有多大帮助。

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

我认为我真正喜欢的是

a）一种挂钩流星渲染事件的方法

或更好

b）将查询布局连接到模板的更简洁方法

思想？

Answer 1

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

在我给出的示例中，我通过将所有渲染放在#each构造中来使整个页面处于反应状态。我现在所做的是尝试使反应性上下文尽可能小，以便只有一个（相对）小部分的页面在任何被动变化时被重新呈现，并且所有的被动元素被包含在内下面（或 way 下面）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元素下面的反应元素（到目前为止，我已经尝试过面板，标签，手风琴，按钮和弹出窗口）整个过程就像它在闪亮的宣传册中所说的那样！ ; - ）

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

1 个答案: