将一个普通的 JS 对象变成一个响应式的对象

Question

我正在处理一个有两条路径的编辑表单。一种是用户单击“新建”按钮时，另一种是用户单击“编辑”时。

当他们单击“新建”时，代码将 form_id 会话变量设置为 null 并将 client_id 会话变量设置为 null，然后执行 Router.go('formEdit') 以加载 formEdit 模板/路由。

在 formEdit.js 中，我做了一个响应式模板帮助器（我认为这就是它们的名称，但无论如何），如下所示：

Template.formEdit.form = function() {
    var form;
    if (Session.equals('form_id', null)) {
        // Create empty form
        form = {
            title: null,
            client_id: Session.get('client_id'),
            header_fields: [],
            form_fields: []
        };
    } else {
        // Load form
        form = Forms.findOne({_id: Session.get('form_id')});
    }

    return form;
}

基本上我会检查是否设置了form_id，如果是，我会从 Forms 集合中加载它，如果没有，我会创建一个空白集合。我认为这会很简单，真的。

问题是创建/找到的form 对象的行为不是“反应性”的。如果我添加header_fields 或form_fields，则后续模板代码永远不会更新。两者都在{{#each}} 中，如下所示：

<template name="formEdit">
    ...
    {{#each header_fields}}
        {{> headerFieldOutput}}
    {{/each}}
    ...
    {{#each form_fields}}
        {{> formFieldOutput}}
    {{/each}}
</template>

如何使我可以将header_fields 和form_fields 推送到表单上并让基础模板响应式更新{{#each}}？

Answer 1

我认为您的做法与 Meteor 中的反应式编程方法所期望的有所不同。

您将“显示”逻辑放在模板助手中，而不是使用模板脚手架本身来完成。

因此，声明一个非常简单的模板助手，如下所示：

Template.formEdit.form = function () {
  return forms.findOne(Session.get("form_id"));
};

然后，在你的模板脚手架中有这样的东西：

{{#if form}}
 {{#with form}}
  {{#each header_fields}}
   etc...
 {{/with}}
{{#else}}
  [[insert your blank form scaffolding in here]]...
{{/if}}

然后，当您设置 Session form_id 变量时，您可以将其设置为 null 以调用 {{#else}} 部分。

还有比这更多的细节（例如，表单提交单击处理程序中的逻辑，用于识别您是在执行更新还是插入），但希望您能从中获得要点。

您应该尝试gain a better understanding 了解游标和反应式计算的工作原理，因为它将帮助您更好地了解如何最好地使用反应式方法。一个很好的起点是parties 示例（观看视频并手动浏览代码）。它与您正在做的事情相似，并展示了一种在您没有“选定”对象时构建模板的好方法。

希望这会有所帮助！