如何在 Meteor 中添加换行符？答案

【问题标题】：How to add a line break in Meteor?如何在 Meteor 中添加换行符？
【发布时间】：2015-04-22 01:59:32
【问题描述】：

我不太确定每次单击流星中的按钮时如何添加换行符（在本例中为“结束日”）。之后的 jquery 不应该工作，因为它是反应数据。

你可以在这里看到它。我只想在结束日之后在列表顶部添加换行符！

http://sallychecklist.meteor.com/

HTML

<template name="checklist">
  <ul>{{#each list}}
    <li class='check {{selected}}'>{{task}} {{status}}</li>
    {{/each}}
  </ul>
  <input type="button" class="checked" value="Done">
  <input type="button" class="line" value="End Day">
</template>

<template name="addtask">
  <form>
    <input type="text" name="add">
    <input type="submit" value="Add Task">
  </form>
</template>

这里是模板助手。

Template.checklist.helpers({
  'list': function() {
    return CheckList.find()
  },

  'selected': function() {
    var taskId = this._id;
    var anotherSelectedTask = Session.get('selectedTask');
    if (taskId == anotherSelectedTask) {
      return "selected"
    }
  }
})

Template.checklist.events({
  'click .check': function() {
    var taskId = this._id;
    Session.set('selectedTask', taskId);
  },

  'click .checked': function() {
    console.log('check');
    var selectedTask = Session.get('selectedTask');
    CheckList.update(selectedTask, {
      $set: {
        status: '✓'
      }
    });
  },
  'click .line': function() {
    console.log('remove');
    var removeId = Session.get('selectedTask');
    CheckList.remove(removeId);
  }
})

Template.addtask.events({
  'submit form': function(event) {
    event.preventDefault();
    var taskName = event.target.add.value;
    CheckList.insert({
      task: taskName
    })
  }
})

谢谢！！！

【问题讨论】：

你的脚本代码在哪里？
你想在哪里添加换行符？另外，addtask 模板与问题的相关性是什么？
您好，请查看编辑。谢谢！

标签： javascript jquery meteor

【解决方案1】：

现场示例没有“结束一天”按钮？但是你的代码可以。我会添加“selected”作为 ID，以便轻松访问您想要在下面的元素：

<li id="{{selected}}" class='check {{selected}}'>{{task}} {{status}}</li>

然后在css中为水平线创建一个简单的类：

.horizontal-line {
  border-bottom: solid black 1px;
}

现在是 JavaScript。添加此事件。

'click .line': function() {
  // get the selected element
  var selectedElement = document.getElementById('selected');
  // add a class to the existing class names
  selectedElement.className = selectedElement.className + ' horizontal-line';
}

这应该会在所选元素下方为您提供一行，从而结束一天的待办事项。

您必须创建一个新的删除按钮来删除一个元素，因为这就是您的结束日按钮当前的作用。

希望对你有帮助！

【讨论】：

【解决方案2】：

尝试使用

<pre>
Your
breaking 
contents
</pre>

【讨论】：

抱歉，这对我的有什么影响？它不应该出现在事件中吗？