Question

我正在创建这个网页，您可以在其中创建一个包含图表标题和不同部分的画布。在主页上，单击“创建新画布”，调用模式，您可以在其中输入画布的标题并将其添加到集合中。所有画布都显示在这个主页上。这个功能有效！

当您单击特定画布时，它会路由到新页面，其中显示您选择的画布的标题以及要填写的图表。（问题和解决方案只是图表中许多部分中的两个）。目前，标题显示正确，但我遇到了textareas的问题。 textareas的内容不会保存，当您刷新页面时，所有内容都将被删除。

{{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之间的唯一区别是添加表单使用输入而不是textarea。第二次插入集合是不正确的？

Answer 1

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

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

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

问题已解决！我需要在第一次创建对象时将对象中的所有变量设置为undefined。然后在更新对象时，我可以将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将内容保存到收藏中

2 个答案: