Question

作为初学者，我正在构建一些测试和培训。现在，我有一个Monkeys集合，显示猴子名称和年龄的列表。访客可以添加或删除猴子。当访问者将猴子添加到列表中时，我希望其他人在用更新按钮更新列表之前不会看到它。

我尝试了几种方法而没有找到如何达到这个目的。什么是最好的方法？或者我有什么要学会做的？

这是我的js文件（当然，现在所有文件都完全是被动的）。

＆＃13;

//Monkeys collection subscription is in the waitOn function in the router.js page
//--------------------------------------------------------------------
Template.hello.helpers({
  monkeys: function(){
     var listMonkeys = Monkeys.find({}, {sort: { age:  -1,  name: 1}});
     return  listMonkeys; 
  }
});
//---------------------------------------------------------------------
 Template.hello.events({
  // insert new monkey
    'submit': function (e) {
      e.preventDefault();
      var name = e.target.new_name.value;
      var age = parseInt(e.target.new_age.value);     
      Monkeys.insert({"name":name,"age":age}, function(error, result) {
        if (error) {alert(error.message);} 
    });
  },
  //delete this monkey
  'click .delete': function(){   
    var name = this.name;
    Monkeys.remove({"_id":this._id}, function(error, result) {
      if (result) {alert(name + " has been deleted");}
      if (error) {alert(error.message);}
    });
  },
  //update listMonkeys
  'click #updatelistMonkeys': function(){
    // ... update function
  }
});
//--------------------------------------------------------------------------
//There are only some tests in order to understand how works Meteor startup function
Meteor.startup(function () {
  var listMonkeys = Monkeys.find({}, {sort: { age:  -1,  name: 1}}).fetch();
  console.log("Meteor.startup: ");
console.log(listMonkeys);//return a empty array

Tracker.autorun(function(){
  var listMonkeys = Monkeys.find({}, {sort: { age:  -1,  name: 1}}).fetch();
  console.log("Tracker.autorun: ");
  console.log(listMonkeys)//at first, return a empty array, immediately after,return the filled array
})  
});

＆＃13;

＆＃13; 这是我的html模板：

＆＃13;

<template name="hello">
<h2>Monkeys forever!</h2>
<button id = "updatelistMonkeys"><img src="images/update-contacts-icon.png"  style= "width: 2em;"></button>
{{#each monkeys}}
	<p class = "listMonkeys">Name: {{name}} - age: {{age}} <button class="delete">X</button></p>
{{/each}}

 <form>
 <legend ><b>Add a new Monkey: </b> </legend>
        <input type="text" name="new_name">
        <input type="number" name="new_age">
        <button type="submit">submit</button>
    </form>
</template>

＆＃13;

Answer 1

您可以通过进行两次修改来禁用帮助程序中的反应性，包括reactive: false选项并在末尾添加.fetch()，以强制重新调整结果，而不是游标。试试这个：

monkeys: function() {
    return Monkeys.find({}, {sort: {age: -1, name: 1}, reactive: false}).fetch();
}

从github问题中解决了这个问题：

https://github.com/meteor/meteor/issues/771

Answer 2

您可以从服务器方法加载数据，这解决了您现在遇到的一些问题，但您仍需要为更新按钮设置通知系统以重新运行服务器方法。

// server/methods.js
Meteor.methods({
  getMonkeys: function () {
    return Monkeys.find({}, {sort: { age:  -1,  name: 1}}).fetch();
  }
})

//tpl helper
Template.hello.helpers({
  monkeys: function(){
    Meteor.call("getMonkeys", function(err,monkeys){
      if(err){
     //do smth with the error 
     } 
     return monkeys;
   })
  }
})

Answer 3

<@> @Brian Shambien：它仍然是反应性的。你可以看到==＆gt; monkeys.meteor.com

我想这是因为变量处于被动上下文中并且每次变化时都会重新评估。

Template.hello.helpers({
  monkeys: function(){
    var listMonkeys =  Monkeys.find({}, {sort: {age: -1, name: 1}, reactive: false}).fetch();
    return listMonkeys; 
  }
});

管理不同访客之间的反应

3 个答案: