Meteor：在集合中编辑和保存子文档答案

【问题标题】：Meteor: Editing and saving subdocuments in a collectionMeteor：在集合中编辑和保存子文档
【发布时间】：2015-08-17 21:44:57
【问题描述】：

我正在学习流星框架，因为它能够轻松地进行实时输入和更新。因为它对我来说是新的，所以我不太确定这是否是最有效的做事方式。

我正在尝试创建两个表单来在 MongoDB 中保存一些数据。我正在使用 SimpleSchema。

首先有一个简单的输入字段，用于向 DB 添加标题。：

模板

<template name="addForm">
    <form>
        <input type="text" name="text">
        <input type="submit" value="add">
    </form>
</template>

events.js

Template.addForm.events({
    'submit form': function(event){
        event.preventDefault();
        var title = event.target.text.value;
        MongoArticle.insert({
            title: title,
            slug: title.toLowerCase()
        });
        event.target.text.value = "";
    }
});

collection.js

MongoArticle = new Mongo.Collection('articles');

var subset = new SimpleSchema({
    age: {type: String, optional: true},
    value: {type: String, optional: true},
    info: {type: String, optional: true},
});

MongoArticle.attachSchema(new SimpleSchema({
    title: {type: String},
    slug: {type: String},
    flag: {type: Boolean, optional: true},
    elements: {type: [subset], optional: true}
}));

数据库中保存的所有标题将显示在列表中：

<template name="list">
    <ul>
        {{#each art}}
            <li><a href="/article/{{_id}}">{{title}}</a></li>
        {{/each}}
    </ul>
</template>

如果您单击标题，您将获得详细的表格。在这里您可以添加和编辑多个元素，这些元素保存在一个子文档（元素 -> 子集）中。

<template name="Editor">
    <table>
        <tbody>
            {{#each art.elements}}
                <tr>
                    <td><input type="text" value="{{age}}"></td>
                    <td><input type="text" value="{{value}}"></td>
                    <td><input type="text" value="{{info}}"></td>
                </tr>
            {{/each}}
            <tr>
                <td><input type="text" value=""></td>
                <td><input type="text" value=""></td>
                <td><input type="text" value=""></td>
            </tr>
        </tbody>
    </table>
</template>

所以我试图让所选文章的所有元素都显示在一行输入字段中。这将允许它们被编辑。我想要实时保存，以便（如果可能）保存每个更改而无需单击按钮。这可能吗？

最后一行应用于输入新数据，然后应将其添加到编辑器中。

我尝试在每一行上使用 update() 并在最后一行上使用 input() 来做到这一点，但这对我不起作用，因为我不知道如何将行保存到元素中-数据库中的字段，它是文章集合的子文档。

所以我阅读了一些网站，发现了“aldeed:autoform”和“aldeed:collection2”。这对我正在做的事情有帮助吗？

【问题讨论】：

标签： javascript mongodb meteor

【解决方案1】：

如果您给输入名称对应于模型字段，那么更新现有元素归结为以下 sn-p：

'change input[name]': function (e, t) {
  var articleId = t.data.art._id; // or something similar
  var updates = {};
  var $target = $(e.target);
  var index = $target.closest('tr').index();
  var name = $target.attr('name');
  updates['elements.' + index + '.' + name] = $target.val();
  MongoArticle.update({ _id: articleId }, { $set: updates });
}

您也可以考虑使用不同的事件，例如keyup 以及一些 _.debounce()。

插入新元素更加简单，因为您不需要索引。此外，您可能想要挂钩不同的事件（可能是按钮单击？）并将$set 修饰符替换为$push，即

MongoArticle.update({ _id: articleId }, { $push: {
  elements: {
    age: "",
    value: "",
    info: ""
  }
}});

【讨论】：