Meteor textarea 将内容保存到 collection

Question

我正在制作此网页，您可以在其中创建一个 canvas，其中包括图表上的标题和不同部分。在主页上单击 "create new canvas"，它会调用一个模式，您可以在其中输入 canvas 的标题并将其添加到 collection。所有 canvases 都显示在此主页上。这个功能有效！

当您单击特定 canvas 时，它会转到一个新页面，该页面会显示您选择的 canvas 的标题和供您填写的图表。（问题和解决方案只是图表众多部分中的两个）。目前，标题显示正确，但我在使用文本区域时遇到问题。文本区域的内容不会保存，当您刷新页面时，所有内容都会被删除。

{{title}}
<form class="js-fill-canvas">
Problem: <textarea placeholder="Top 3 problems" name="problem">{{problem}}</textarea>
Solution: <textarea placeholder="Top 3 features" name="solution">{{solution}}</textarea> 
</form>

Template.canvas_add_form.events({
  'submit .js-add-canvas':function(event){
   var title;
   title = event.target.title.value;

   Canvas.insert({
      title:title,
      createdOn: new Date(),
      createdBy: Meteor.user()._id
   });
   $("#canvas_add_form").modal('hide');
   return false;
   }
});

Template.canvas_edit.events({
   'submit .js-fill-canvas':function(event){ 
    var problem, solution;
    problem = $(event.target).val();
    solution = $(event.target).val();

    Canvas.insert({
       problem:problem,
       solution:solution
    });
    return false;
    }
});

canvas_add_form 和 canvas_edit 之间的唯一区别是添加表单使用输入而不是文本区域。第二次插入collection不正确吗？

Answer 1

回答你的问题，是的，插入两次是一个问题，因为你随后将文本区域数据保存到一个全新的记录中（这似乎没有意义）。

相反，您应该像这样更新您的记录。

Template.canvas_edit.events({ 
  'submit .js-fill-canvas': function(event) { 
    var problem, solution;
    problem = event.target.problem.value; 
    solution = event.target.solution.value;

    Canvas.update(this._id, {
      $set: {
        problem: problem, 
        solution: solution 
      }
    }); 

    return false; 
  }
});

这里的一些关键事情是 this 包含模板中的数据上下文（因此我们可以获得我们的 _id）并且您可以直接从 event.target

访问表单元素

Answer 2

问题已解决！我需要在第一次创建对象时将对象内的所有变量设置为未定义。之后更新对象时，我可以将 textarea 值设置为空变量。这是工作代码：

{{title}}
<form class="js-fill-canvas">
Problem: <textarea placeholder="Top 3 problems" id="problem">{{problem}}</textarea>
Solution: <textarea placeholder="Top 3 features" id="solution">{{solution}}</textarea> 
</form>

Template.canvas_add_form.events({
  'submit .js-add-canvas':function(event){
   var title, problem, solution;
   title = event.target.title.value;

   Canvas.insert({
      title:title,
      problem: undefined,
      solution: undefined,
      createdOn: new Date(),
      createdBy: Meteor.user()._id
   });
   $("#canvas_add_form").modal('hide');
   return false;
   }
});

Template.canvas_edit.events({
   'submit .js-fill-canvas':function(event){ 

    problem = $('textarea#problem').val();
    solution = $('textarea#solution').val();

    Canvas.update(this._id,{ 
       $set: {
       problem:problem,
       solution:solution
       }
    });
    return false;
    }
});

Meteor textarea 将内容保存到 collection

Meteor textarea saving content to collection

html

javascript

jquery

textarea

meteor