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>: ...}}

这是我的模板：

<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，我在Discover Meteor书上看到它，但它没有意义，因为我找到了'name'的正确元素（不知道那叫什么）.. 我在productOptions中使用的名称和描述也应该与我在db上使用的名称和描述相同吗？

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

流星底漆

我们来看看代码吧。 Meteor将事件处理程序中的this绑定到模型，因此this._id（您分配给currentProduct变量）获取要更新的文档的ID。

因此，现在您要更新哪个文档（MongoDB项称为文档）。怎么做以及如何设置它？好吧，我们想要根据表单数据进行更新。传递给事件处理程序的第二个参数是template实例，其中包含仅在模板上下文中查询DOM的$ property。这就是我们获取表单值的地方。

现在，我们只需要在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>

Meteor更新收集错误

1 个答案:

流星底漆