Question

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

我正在尝试创建两个表单来保存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>

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

<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（），但它对我不起作用，因为我不知道如何将行保存到元素中 - DB中的字段，它是articles-collection的子文档。

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

Answer 1

如果您提供与模型字段对应的输入名称，则更新现有元素可归结为以下代码段：

'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: ""
  }
}});

Meteor：编辑和保存集合中的子文档

1 个答案: