Question

我不太确定每次点击流星中的按钮时都能添加换行符（在本例中为“结束日”）。之后的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
    })
  }
})

感谢!!!

Answer 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';
}

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

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

希望它有所帮助！

Answer 2

尝试使用

<pre>
Your
breaking 
contents
</pre>

如何在Meteor中添加换行符？

2 个答案: