Using jquery-layout with meteor

2019-05-10 01:22发布

站内问答 / jQuery
1458 1 4

I am new to meteor and jquery-layout.

I am struggling to see how to make the two work together. I have added the jquery and jquery-layout packages. I believe I need to ask jQuery layout to layout the page at some stage, but when? If I do it in the HTML page, I get the message "/ UI Layout Initialization Error / The center-pane element does not exist. /The center-pane is a required element.". I think this is because meteor hasn't yet loaded any templates. The example is based on a meteor default app. I added an extra template to go in the east pane. And pasted in the jQuery layout script.

So where, when and how should I layout my page?

  <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>

1条回答
Summer. ? 凉城
2楼-- · 2019-05-10 02:06

Actually the problem is just as the error says: the center pane is a required element. So instead of ui-layout-east and ui-layout-north, try ui-layout-east and ui-layout-center:

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

Also, the proper place to initialize the layout is within a template's .rendered event handler. So try restructuring your code such that there's one master template, such as root in the example below, and then put your jQuery initialization code inside Template.root.rendered (line 2 of the .js file below). Don't put any JavaScript inside <head> and don't use $(document).ready:

layout.html (assuming default filenames)

<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>

layout.js

if (Meteor.isClient) {
  Template.root.rendered = function() {
    $('body').layout({ applyDemoStyles: true });
  };
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)