javascript - Blaze表单的template.data在第一次提交后去哪里了?

标签 javascript meteor meteor-blaze spacebars

我使用 {{> ArticleForm}} 创建和更新阿拉伯语-俄语词典中的文章。在 Autoform 插件出现一些问题后,我在模板中使用 blaze 和 ReactiveDict。

首先我用它来更新文章,一切正常。现在我添加了相同的表单来创建文章。我将 {{ > ArticleForm}} 放置到引导模式内的 {{> Header}} 组件,并通过顶部菜单中的“+Add”按钮调用它。它打开我的表格。文章的第一次插入效果很好。 DB中有新文章,甚至我重定向到新文章。但是在第二次调用时,template.data 为空并且表单不具有交互性,它会引发错误,因为在更新任何字段后,ArticleForm 应该从 template.data 写入 ReactiveDict,但它不存在。我不明白,第一次成功插入后 template.data 去了哪里......如果有人知道请回答......

它的外观如下:

Peek%202018-02-19%2001-24|690x290

这是我的表单的数据上下文:

Template.ArticleForm.helpers({
  article() {
    console.log("helper-article");
    if (!this.words) this.words = [{ note: "", word: "" }];
    if (!this.translations) this.translations = [{ translation: "" }];
    if (!this.synonyms) this.synonyms = [];
    if (!this.roots) this.roots = [];
    if (!this.subjects) this.subjects = [];
    //newWords, newTranslations - это добавление имен к элементам формы,
    //по которым можно будет отслеживать все изменения в форме
    let newWords = this.words.map((elem, index) => {
      return { note: elem.note, word: elem.word, wordId: `words.${index}` };
    });
    let newTranslations = this.translations
      ? this.translations.map((elem, index) => {
          return {
            translation: elem.translation,
            translationId: `translations.${index}.translation`,
            examples: elem.examples
              ? elem.examples.map((elem2, index2) => {
                  return {
                    example: elem2.example,
                    translation: elem2.translation,
                    exampleId: `translations.${index}.examples.${index2}`
                  };
                })
              : []
          };
        })
      : [];

    this.words = newWords;
    this.translations = newTranslations;
    this.picture = Session.get("picture");
    Template.instance().reactiveForm.set("article", this);
    const article = Template.instance().reactiveForm.get("article");
    return article;
  },
  deleted() {
    return this.deleted ? "checked" : "";
  },
  showMiddleHarakat(speachPart, index) {
    return speachPart == "глагол, I порода" && index == 0;
  },
  picture() {
    return Session.get("picture");
  }
});

这是我的模板 {{> ArticleForm}}

<template name="ArticleForm">
        <form id="articleForm-{{_id}}" class="panel panel-default article {{#if notPublished}}-opacity-06{{/if}}">
          <div class="panel-heading">
                <div class="panel-title words">
                    <div class="label label-info speach-part">{{speachPart}}</div><br />
                    <!-- Глагол 1й породы имеет дополнительную информацию для вывода, поэтому 
                    особый шаблон его вывода, например, среднекорневую глассную и масдары -->
                        {{#each article.words}}
                                <div class="wordEdit editField" id="{{wordId}}">
                                    <i class="glyphicon glyphicon-remove remove-word -remove" id="remove.{{wordId}}"></i>
                                    <input type="text" placeholder="прим." value="{{note}}" name="{{wordId}}.note" class="form-control note">
                                    <input type="text" placeholder="слово" value="{{word}}" name="{{wordId}}.word" class="form-control word -arabic-text-mid">
                                </div>
                            {{#if showMiddleHarakat ../speachPart @index}}
                                <div class="note middleHarakat" title="среднекорневая гласная настоящего времени">
                                        <input type="text" placeholder="скгнв" value="{{../middleHarakat}}" name="middleHarakat" class="form-control note">
                                </div>
                            {{/if}}
                        {{/each}}
                        <div class="add-word">
                                <i class="glyphicon glyphicon-plus"></i>
                        </div>
                </div>
          </div>
          <div class="panel-body">
                <div class="translations">
                    {{#each article.translations}}
                        <div class="translation">
                                <div class="editField editTranslation" id="{{translationId}}">
                                    <input type="text" name="{{translationId}}" value="{{translation}}" class="form-control" placeholder="перевод">
                                    <i class="glyphicon glyphicon-remove remove-translation -remove" id="remove.{{translationId}}"></i>
                                </div>
        
                                <div class="examples examples-form-{{../_id}}-{{@index}}">
                                        {{#each examples}}
                                            <div class="exampleEdit editField" id="{{exampleId}}">
                                                    <input type="text" placeholder="пример" value="{{example}}" name="{{exampleId}}.example" class="form-control example -arabic-text-mid">
                                                    <input type="text" placeholder="перевод примера" value="{{translation}}" name="{{exampleId}}.translation" class="form-control translation">
                                                    <i class="glyphicon glyphicon-remove remove-example -remove" id="remove.{{exampleId}}"></i>
                                            </div>
                                        {{/each}}
                                        <button class="btn btn-default btn-xs add-example" id="addExampleFor.{{translationId}}">
                                                <i class="glyphicon glyphicon-plus"></i>Пример
                                        </button>
                                </div>
                        </div>
                    {{/each}}
                    <button class="btn btn-default btn-sm add-translation">
                            <i class="glyphicon glyphicon-plus"></i>Перевод
                    </button>
                </div>
                {{> TagsSubjects}}
                {{> TagsSynonyms}}
                {{> TagsRoots}}
                <!--                 
                <div class="uploadImage">
                    {{> uploadForm}}
                    picture: {{picture}}
                </div> 
                -->
          </div>
          <div class="panel-footer">
            <button class="btn btn-primary article-save">Сохранить</button>
            <button class="btn btn-default article-edit-cancel">Отмена</button>
          </div>
        </form>
</template>

最佳答案

这可能是因为您在模式关闭时没有正确清除表单模板?请记住,模式只是隐藏,模板并未删除。

在向我的 boostrap modal package 添加 AutoForm 支持时遇到了类似的问题.

关于javascript - Blaze表单的template.data在第一次提交后去哪里了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48870324/

相关文章:

c - 通过 websocket 失败的 DDP 消息

meteor - 在 DOM 初始化后加载数据时显示加载器

node.js - 在 Meteor 中延迟加载有什么用?

javascript - meteor 模板和火焰的复选框问题

javascript - 删除一行后刷新 Bootstrap-Vue 表

javascript - 如何从 JavaScript 中的链接中提取文本?

javascript - 限制跨域 Ajax 请求

javascript - 如何使用 Meteor 中的信息窗口按钮触发模式/弹出窗口?

javascript - Meteor - 箭头函数打破 ES6 中的 #each 循环

javascript - 在动态添加的 div 上初始化 owl carousel