Question

我正在制作一个有两条路径的编辑表单。一种是当用户点击＆＃34;新＆＃34;按钮，另一个是他们点击＆＃34;编辑＆＃34;。

当他们点击＆＃34; New＆＃34;时，代码将form_id Session var设置为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对象不会在＆＃34;被动＆＃34;办法。如果我添加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的反应式编程方法有所不同。

您正在放置＆＃39;显示＆＃39;模板帮助程序中的逻辑，而不是使用模板脚手架来完成它。

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

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示例（观看视频并手动浏览代码）。它与您正在进行的操作类似，并且显示了一种很好的方法来构建模板，以便在您没有选择的时候进行选择。对象

希望这有帮助！

将普通的JS对象转换为被动对象

1 个答案: