在流星上使用jquery-layout [英] Using jquery-layout with meteor
问题描述
我是流星和jquery布局的新手.
I am new to meteor and jquery-layout.
我正在努力寻找如何使两者一起工作的方法.我已经添加了jquery和jquery-layout包.我相信我需要在某个阶段要求jQuery布局来布局页面，但是什么时候?如果在HTML页面中执行此操作，则会收到消息"/UI布局初始化错误/中心窗格元素不存在./中心窗格是必需的元素.".我认为这是因为流星尚未加载任何模板.该示例基于流星默认应用程序.我在东窗格中添加了一个额外的模板.并粘贴到jQuery布局脚本中.
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>
推荐答案
实际上，问题恰如错误所言: center 窗格是必填元素.因此，请尝试使用ui-layout-east和ui-layout-center代替ui-layout-east和ui-layout-north:
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>
此外，初始化布局的正确位置是在模板的.rendered事件处理程序中.因此，请尝试重组您的代码，以便有一个主模板，例如下面的示例中的root，然后将jQuery初始化代码放入Template.root.rendered(下面.js文件的第二行)中.不要在<head>中放入任何JavaScript，也不要使用$(document).ready:
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 (假设使用默认文件名)
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 });
};
}
这篇关于在流星上使用jquery-layout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
