Question

我现在已经多次遇到过这种情况，我意识到我对'流星/右'处理它的方式并不十分自信。

假设我有一个包含多个部分的表单 - 每个部分由一个模板表示 - 并且在每个部分中都有更多的模板表示例如。 datepickers等。

<template name='myForm'>
    {{>partOne}}
    {{>partTwo}}
    <button class='submit'>Submit</button>
</template>

<template name='partOne'>
    {{>widget}}
    {{>widget}}
</template>

<template name='widget'>
    <input class='datepicker' />
</template>

我希望在用户填写表单时跟踪我的表单 - 在'myForm'模板的级别 - 但所有事件都发生在'widget'级别。

我一直看到的一个解决方案（例如in this SO answer）就是将所有内容都放在全局Session变量中。像这样

Template.widget.events({
    'click .select' : function(event, template){
        var name = template.data.name;
        Session.set(name, $(event.currentTarget).val());
    }
});

然后在myForm中我应该做这样的事情

Template.myForm.rendered = function(){
    Tracker.autorun(function(){
        var name = Session.get('name');
        // do something
    });
}

但是随着我的表单变得越来越复杂，我发现这在myForm模板级别上变得一团糟，同时用非真正应用程序全局的数据填充我的Session变量。

对于其他人如何处理这个问题，我真的很感激！保持模板和小部件模块化，同时仍然能够跟踪并响应来自父模板的触发事件......

Answer 1

你并不孤单，感觉某些东西是不对的。这是关于Blaze 2的很多话题的原因之一。这就是我的工作：

创建应用全局命名空间（例如G = {}）。我通常使用应用名称的第一个字母＆amp;在lib/config/_namespace.js

中执行此操作

将您的收藏集放在G.Collections或G.C，

中

将您的共享功能放在G.Fx等等......

将模板变量放入G.T。

然后，将该变量保存到G.T.varName。这样，您就可以在rendered以及events和helpers中使用它。作为一个特权，它很容易找到你所有的“全局”，因为它们都在G对象中。此外，您现在可以再次使用“严格”。

然后，保持清洁：

Template.parentTemplate.destroyed = function() {
  G.T = {};
};

因此，如果您需要反应性，只需制作ReactiveDict：

Template.parentTemplate.created = function() {
  G.T.RD = new ReactiveDict();
};

Answer 2

您可以使用文件级ReactiveVar或ReactiveDict，而不是Session对象。

流星 - 处理嵌套模板中的事件......不会污染“会话”变量

2 个答案: