Using jquery-layout with meteor

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>

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 });
  };
}

来源：https://stackoverflow.com/questions/16037823/using-jquery-layout-with-meteor

标签

jquery

meteor

jquery-layout