流星删除特定文档的每个占位符
Meteor each placeholder for deleting specific document
如何在空格键 {{#each}} 中为刚刚删除的文档设置会话变量?我想通知用户他们刚刚删除了一些内容,消息将代替同一个文档。
例如:
{{#each list}}
<span>{{number}}</span>
{{/each}}
将编译为:
<span>1</span>
<span>2</span>
<span>3</span>
如果我要从集合中删除第二个文档 {number: 2},那么模板将按预期对更改做出相应的反应:
<span>1</span>
<span>3</span>
相反,我希望它在 Mongo 删除语句之后显示以下内容:
<span>1</span>
<span>You have deleted 2</span>
<span>3</span>
您可以通过使用 _uihooks 在每次删除元素时插入一个占位符元素来完成此操作。我创建了一个 meteor pad with an example.
client.js
Template.body.events({
"click #add-item": function() {
Items.insert({name: "Item"});
},
"click .delete": function() {
Items.remove({_id: this._id});
}
});
Template.body.helpers({
items: function() {
return Items.find({});
}
});
Template.body.rendered = function() {
Meteor.defer(function(){
document.getElementById("items")._uihooks = {
removeElement: function(node) {
var placeholder = document.createElement("li");
$(placeholder).html("Placeholder");
$(placeholder).insertBefore(node);
$(node).remove();
}
}
});
}
main.html
<body>
<ul id="items">
{{#each items}}
<li>
{{name}}
<button class="delete">delete</button>
</li>
{{/each}}
</ul>
<button id="add-item">Add item</button>
</body>
如何在空格键 {{#each}} 中为刚刚删除的文档设置会话变量?我想通知用户他们刚刚删除了一些内容,消息将代替同一个文档。
例如:
{{#each list}}
<span>{{number}}</span>
{{/each}}
将编译为:
<span>1</span>
<span>2</span>
<span>3</span>
如果我要从集合中删除第二个文档 {number: 2},那么模板将按预期对更改做出相应的反应:
<span>1</span>
<span>3</span>
相反,我希望它在 Mongo 删除语句之后显示以下内容:
<span>1</span>
<span>You have deleted 2</span>
<span>3</span>
您可以通过使用 _uihooks 在每次删除元素时插入一个占位符元素来完成此操作。我创建了一个 meteor pad with an example.
client.js
Template.body.events({
"click #add-item": function() {
Items.insert({name: "Item"});
},
"click .delete": function() {
Items.remove({_id: this._id});
}
});
Template.body.helpers({
items: function() {
return Items.find({});
}
});
Template.body.rendered = function() {
Meteor.defer(function(){
document.getElementById("items")._uihooks = {
removeElement: function(node) {
var placeholder = document.createElement("li");
$(placeholder).html("Placeholder");
$(placeholder).insertBefore(node);
$(node).remove();
}
}
});
}
main.html
<body>
<ul id="items">
{{#each items}}
<li>
{{name}}
<button class="delete">delete</button>
</li>
{{/each}}
</ul>
<button id="add-item">Add item</button>
</body>