Jquery 多页应用程序'；流星0.8.0中的s，没有铁路由器或任何模块_Jquery_Html_Dom_Meteor_Iron Router

Jquery 多页应用程序'；流星0.8.0中的s，没有铁路由器或任何模块

jquery html dom meteor

Jquery 多页应用程序'；流星0.8.0中的s，没有铁路由器或任何模块,jquery,html,dom,meteor,iron-router,Jquery,Html,Dom,Meteor,Iron Router,我的目标是从一个页面切换到另一个页面。虽然我知道如何使用Iron Router实现这一点，但我想自己编程，因为我正在向拥有windows的人教授Meteor，因此没有Iron Router 编辑：子问题：这里提出的哪三种方法更有效我的第一个方法： //HTML <body> {{>mainTemplate}} </body> //Cliente JS Initially Session.set('current', 'initialTemplate') Te

我的目标是从一个页面切换到另一个页面。虽然我知道如何使用Iron Router实现这一点，但我想自己编程，因为我正在向拥有windows的人教授Meteor，因此没有Iron Router

编辑：子问题：这里提出的哪三种方法更有效

我的第一个方法：

//HTML
<body>
  {{>mainTemplate}}
</body>

//Cliente JS Initially
Session.set('current', 'initialTemplate')
Template.mainTemplate = function()
{
    return Template[Session.get('current')];
};

//Later
Session.set('current', 'someOtherTemplate')

//HTML
{{>mainTemplate}
//客户
Session.set（'current'，'initialTemplate'）
Template.maintplate=函数（）
{
返回模板[Session.get（'current'）；
};
//后来
Session.set（'current'，'someOtherTemplate'）

这是一种非常快速的工作方式，但它需要大量未经IDE检查的手动字符串，并且可能会导致错误。所以我的第二个方法是解决这个问题：

//HTML
<body>
</body>

//JS Client Initially
UI.materialize( Template.initialTemplate, document.body );

//Later
$("body").html("");
UI.materialize( Template.someOtherTemplate, document.body );

//HTML
//JS客户端
UI.materialize（Template.initialTemplate，document.body）；
//后来
$（“body”）.html（“”）；
UI.materialize（Template.someOtherTemplate，document.body）；

第二种方法使用变量而不是字符串，它可读性强、简短、简单，而且可以工作，但我对jQuery有点怀疑，我今天第一次使用它。另外，我不知道删除Meteor内部的HTML块是否真的方便。如果可能的话，我更喜欢纯流星方法

提前谢谢

编辑这个图案现在很有魅力！有人能找到更简单的吗

//HTML
<body>
  {{>mainTemplate}}
</body>

//JS Client Initially
var current = Template.initialTemplate;
var currentDep = new Deps.Dependency;

Template.mainTemplate = function()
{
  currentDep.depend();
  return current;
};

function setTemplate( newTemplate )
{
    current = newTemplate;
    currentDep.changed();
};

//Later
setTemplate( Template.someOtherTemplate );

//HTML
{{>mainTemplate}
//JS客户端
var current=Template.initialTemplate；
var currentDep=新的部门依赖关系；
Template.maintplate=函数（）
{
currentDep.dependen（）；
回流；
};
函数setTemplate（newTemplate）
{
电流=新模板；
currentDep.changed（）；
};
//后来
setTemplate（Template.someOtherTemplate）；

这个模式来自于。

我为一个只有六个页面的应用程序解决了这个问题，在这个应用程序中添加Iron Router感觉像是过火了。我是这样建造的：

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

<template name="root">
  {{#if currentPageIs "home"}}
    {{> home}}
  {{/if}}
  {{#if currentPageIs "about"}}
    {{> about}}
  {{/if}}
  {{! etc. }}
</template>

Template.root.currentPageIs = function (page) {
  return Session.equals("currentPage", page);
};

就这样。没有jQuery，没有将模板作为字符串使用（我想这应该会在Meteor 0.8的新模板引擎下被打破）。这完全是流星。显然，对于超过几个页面/路由，这种方法变得相当乏味；但它不需要软件包，对于流星新手来说，理解起来非常清楚

为了完整起见，这里有一个示例页面和用于更改页面的帮助程序：

<template name="home">
  <p>Welcome to our website! You can learn more
  <a href="#" id="goToAbout">about us</a>.</p>
</template>

我没有尝试过，但基于您上面的代码，我认为这会起作用：

//HTML
<body>
  {{>mainTemplate}}
</body>

//Cliente JS Initially
var current = Template.initialTemplate;
var currentDep = new Deps.Dependency;

Template.mainTemplate = function()
{
  currentDep.depend();
  return current;
};

//Later
current = Template.someOtherTemplate;
currentDep.changed();

//HTML
{{>mainTemplate}
//客户
var current=Template.initialTemplate；
var currentDep=新的部门依赖关系；
Template.maintplate=函数（）
{
currentDep.dependen（）；
回流；
};
//后来
当前=Template.someOtherTemplate；
currentDep.changed（）；

这只是基于您的“理想”解决方案，但希望能够绕过会话变量对EJSON可执行值的限制。

问题：

page

从何而来以及如何设置它？好的，请阅读一些关于句柄/空格条的内容，我想您仍然需要执行

Session.set（'currentPage'，'somePage'）切换页面，不是吗？我的问题是会话变量是字符串，变量值也是手动字符串。如果我的最后一条注释为true，则您的方法与我的第一个方法等效。您的第一个方法返回整个模板：return template[Session.get（'current'）
而我的助手只返回true/false，“当前页面是否为X？”，然后模板中的#if
块会导致显示所选模板。这就是你如何避免“返回模板HTML”问题的方法。要回答你的另一个问题，是的，每当用户更改页面时，你都需要更新会话变量，但这在你的应用程序中会发生。例如，如果您有一个与id=“goToHome”
的链接，那么您可以在其模板上有一个助手，如“click#goToHome”：function（event，template）{event.preventDefault；Session.set（“page”，“home”）}，这就是您需要编写的所有代码；因为模板、助手和会话都是被动的，所以模板会自动重新绘制。很好的模式！效果很好。我将不得不阅读有关Deps模块的内容，因为在那时，您的depend（）和changed（）对我来说都是黑魔法，而我之所以理解它们是因为它们是可读的。我将把它更新为我当前的理想模式，但添加了一个我目前在自己的实现中使用的辅助函数。
//HTML
<body>
  {{>mainTemplate}}
</body>

//Cliente JS Initially
var current = Template.initialTemplate;
var currentDep = new Deps.Dependency;

Template.mainTemplate = function()
{
  currentDep.depend();
  return current;
};

//Later
current = Template.someOtherTemplate;
currentDep.changed();