流星更新收集错误

Question

我不知道我的代码有什么问题，我正在阅读《发现流星》一书，并构建了一个小型应用程序以更好地学习这些概念：

Template.panelCM.events({
'click .editProductsCol': function(e) {
    e.preventDefault();
    if (confirm('Edit?')){

    var currentProduct = this._id;

    var productOptions = {
        name: $(e.target).find('[name=productName]').val(),
        description: $(e.target).find('[name=productDescription]').val()
    };

    Products.update(currentProduct, {$set: productOptions}, function(error) {
        if (error) {
            alert(error.reason);
            throwError('Error');
        } else {
            Router.go('tabPage');
        }
    });
}},

'click .deleteProductsCol': function(e) {
    e.preventDefault();

    if (confirm("Delete?")) {
        var currentProduct = this._id;
        Products.remove(currentProduct);
        Router.go('tabPage');
    }
}});

删除部分效果很好，它只是我不知道出什么问题的更新。.提交后，出现此错误： MongoError: '$set' is empty. You must specify a field like so: {$mod: {<field>: ...}} MongoError: '$set' is empty. You must specify a field like so: {$mod: {<field>: ...}}

这是我的模板：

<template name="panelCM">
{{#each products}}
    <div class="col-xs-12 col-sm-6 col-md-6 mainCol">
        <img src="../{{image}}"/>
        <input type="text" name="productName" id="productName" class="form-control" placeholder="{{name}}">
        <textarea name='productDescription' id="productDescription" class="form-control colP" rows="10"
                  placeholder="{{description}}" style="color: black"></textarea>
        <button type="submit" class="btn btn-lg btn-success form-control editProductsCol">Edit</button>
        <button type="submit" class="btn btn-lg btn-danger form-control deleteProductsCol">Delete</button>
    </div>
{{/each}}</template>

我做错了什么，我不太了解productOptions var，如果我理解正确的话，我只是创建了一个对象，该对象将获取放置在该html元素上的内容，然后将其传递给我的Products db进行更新，我不太了解是不是也需要在模板上使用id，我在“发现流星”书上看到了它，但这没有意义，因为我用“ name”东西找到了正确的元素（不知道那也是所谓的。）而且在productOptions中使用的im名称和描述应该与我在数据库上使用的im相同吗？

Answer 1

$ .find查找被调用的DOM元素的后代。 您在没有子项的“修改”按钮上调用它。 这意味着它什么也没找到，对.val()的调用返回undefined 。 MongoDB抱怨您将两个字段都设置为undefined ，这几乎没有任何意义。 尝试这样的事情：

'click .editProductsCol': function(e, template) {
    e.preventDefault();
    if (confirm('Edit?')) {

    var productOptions = {
        name: template.$('[name=productName]').val(),
        description: template.$('[name=productDescription]').val()
    };

    Products.update(this._id, {$set: productOptions}, function(error) {
        if (error) {
            alert(error.reason);
            throwError('Error');
        } else {
            Router.go('tabPage');
        }
    });
  }
},

流星底漆

让我们看一下代码。 流星结合this一个事件处理模型内，所以this._id （您分配给currentProduct变量）让你要更新的文档的ID。

现在，您现在要更新什么文档 （MongoDB项称为document ）。 怎么做以及如何设置？ 好吧，我们要基于表单数据进行更新。 传递给事件处理程序的第二个参数是template实例，它包含一个$属性 ，该属性仅在模板上下文内查询DOM。 那就是我们获取表单值的地方。

现在，我们只需要在Meteor.collection上调用update方法就可以了。 从文档中可以看到，它以_id作为选择器，修饰符对象和回调。 您的修饰符是具有$set属性的对象。 它告诉MongoDB保留文档原样，只是添加/替换我们指示的字段（而不是替换整个文档）。

还有一两件事，如果没有特别的理由不这样做，我建议你更换的placeholder与您的输入元素属性value秒。 占位符只是一个视觉提示，对于表单内容本身没有任何意义。

    <input type="text" name="productName" id="productName" class="form-control" value="{{name}}" placeholder="Enter the name">
    <textarea name='productDescription' id="productDescription" class="form-control colP" rows="10" value="{{description}}" style="color: black" placeholder="Enter a description"></textarea>