[英]How to add a line break in 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/ http://sallychecklist.meteor.com/
HTML 的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!!! 谢谢!!!
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. 现在使用JavaScript。 Add this event. 添加此事件。
'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! 希望能帮助到你!
Try using 尝试使用
<pre>
Your
breaking
contents
</pre>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.