增加Horizo​​n集合中的值

时间:2016-08-21 14:23:57

标签: javascript vue.js rethinkdb horizon

我试图弄清楚如何执行在horizo​​n.io集合中递增值的基本任务。例如,我有一个<h1>标签可以代表一个upvotes按钮,我希望upvotes计数是持久的。

<h1 @click="inc">{{foo}}</h1> <!-- foo is local variable -->
    <ul>
      <li v-for="message in me">
      {{message.value}} <!-- message.value is upvote value from collection --> 
      </li>
   </ul>

然后在Vue实例中:

created() {
  me.store({
    datetime: new Date(),
    value: this.foo // local data variable set to 0 initially. 
  }).subscribe(
      result => console.log(result),

      error => console.log(error)
    )
 var self = this
 me.watch().subscribe(function(data){
      data.map(function(data){
        self.foo = data.value
      })
  })  
},

然后,我每次点击<h1>标记时都会尝试更新该值:

inc(){
  me.update({
    id: 1,
    value: this.foo++
  })
}

如何更新集合中的值,是否必须在模板中呈现集合才能访问集合中的值?

1 个答案:

答案 0 :(得分:1)

首先,只需使用新的arrow function syntax即可避免var self = this头痛。即使在函数函数内,this仍将使用最外层的this

created() {
  me.store({
    datetime: new Date(),
    value: this.foo // local data variable set to 0 initially. 
  }).subscribe(
    result => console.log(result),
    error => console.log(error)
  );
  me.watch().subscribe((data) => {
    data.map((data) => {
      this.foo = data.value;
    })
  })  
},

您的增量.update功能看起来是正确的,但我会这样做:

inc(){
  this.foo++;
  me.update({
    id: 1,
    value: this.foo
  });
}

修复后和预修复可能会变得棘手,我不确定它是否会产生您期望的输出,因为它会return the value of this.foo and then increment

  

如何更新集合中的值,是否必须在模板中呈现集合才能访问集合中的值?

如果我正确理解了这个问题,那么您正确使用.update,这样您就知道了!但根据我在Vue中的经验,您不必渲染集合才能访问该值?每次this.foo的文档发生更改时,id: 1都会被重新分配。但是,如果您最初id某个对象时未提供.store,我们将为该文档提供一个。{1}}。因此,您的初始.store代码应该如下所示:     尝试{       me.insert({         id:1,         datetime:new Date(),         value:this.foo //本地数据变量最初设置为0。       })。订阅(         result =&gt;的console.log(结果),         错误=&gt;执行console.log(错误)       );     } catch(e){      console.log(“已经存在!”,e);     }

此外,您只想订阅对该id: 1个文档的更改:

me.find(1).watch()。subscribe((data)=&gt; {   data.map((data)=&gt; {     this.foo = data.value;   }); });

这会回答你的问题吗?

编辑:忘了,改变.watch

EDIT2:将.store(每次都覆盖数据)更改为.insert,如果文档不存在则会插入,如果文档不存在则会更新。我们想要这个功能,因为我们只想插入它,如果它不存在则不做任何操作,而不是覆盖value字段。