如何在Meteor中添加换行符？

I'm not too sure how I can add a line break every time when i click a button in meteor (in this case "end day"). The jquery after shouldn't work since it's reactive data.

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

You can see it here. I just want to add the line break on top of the list after I hit end day!

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

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>

Here is the template helpers.

这是模板助手。

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
    })
  }
})

Thanks!!!

谢谢！！！

2 个解决方案

#1

The live example doesn't have an "End Day" button? But your code does. I would add "selected" as an ID for easy access to the element you want to have line below:

实例没有“结束日”按钮？但你的代码确实如此。我会添加“selected”作为ID，以便于访问您想要在下面的行元素：

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

Then create a simple class in css for the horizontal rule:

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

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

Now for the JavaScript. Add this event.

现在为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';
}

And that should give you a line below the selected element and thus end the day of stuff to-do.

这应该会给你一个选定元素下面的一行，从而结束一天的待办事项。

You will have to create a new remove button to remove an element because that's currently what your end day button does.

您必须创建一个新的删除按钮才能删除元素，因为这是您的结束日期按钮的当前功能。

Hope it helps!

希望能帮助到你！

#2

-1

Try using

尝试使用

<pre>
Your
breaking 
contents
</pre>

#1