3

我是流星和 jquery 布局的新手。

我正在努力寻找如何使两者一起工作。我添加了 jquery 和 jquery-layout 包。我相信我需要在某个阶段要求 jQuery 布局来布局页面，但是什么时候呢？如果我在 HTML 页面中执行此操作，我会收到消息“/UI 布局初始化错误/中心窗格元素不存在。/中心窗格是必需元素。”。我认为这是因为流星还没有加载任何模板。该示例基于流星默认应用程序。我在东窗格中添加了一个额外的模板。并粘贴在 jQuery 布局脚本中。

那么我应该在哪里、何时以及如何布局我的页面呢？

  <head>
    <title>Layouts</title>
    <script type="text/javascript">
      $(document).ready(function () {
        $('body').layout({ applyDemoStyles: true });
      });
  </script>   
  </head>

  <body>
    {{> navigation}}
    {{> hello}}
  </body>

  <template name="navigation">
  <div class="ui-layout-east">
    <p>Navigation stuff here</p>
  </div>
  </template>

  <template name="hello">
  <div class="ui-layout-north">
    <h1>Hello World!</h1>
        {{greeting}}
    <input type="button" value="Click" />
  </div>
  </template>
4

1 回答 1

2

实际上问题就像错误所说的那样：中心窗格是必需的元素。所以代替ui-layout-eastand ui-layout-north，尝试ui-layout-eastand ui-layout-center：

<template name="hello">
  <div class="ui-layout-center">
    <h1>Hello World!</h1>
        {{greeting}}
    <input type="button" value="Click" />
  </div>
</template>

此外，初始化布局的适当位置是在模板的.rendered事件处理程序中。因此，请尝试重组您的代码，以便有一个主模板，如下root例所示，然后将您的 jQuery 初始化代码放入Template.root.rendered其中（下面 .js 文件的第 2 行）。不要在里面放任何 JavaScript<head>也不要使用$(document).ready：

layout.html（假设默认文件名）

<head>
  <title>Layouts</title>
</head>

<body>
  {{> root}}
</body>

<template name="root">
  {{> navigation}}
  {{> hello}}
</template>

<template name="navigation">
  <div class="ui-layout-east">
    <p>Navigation stuff here</p>
  </div>
</template>

<template name="hello">
  <div class="ui-layout-center">
    <h1>Hello World!</h1>
        {{greeting}}
    <input type="button" value="Click" />
  </div>
</template>

布局.js

if (Meteor.isClient) {
  Template.root.rendered = function() {
    $('body').layout({ applyDemoStyles: true });
  };
}
于 2013-04-21T17:22:29.067 回答