Question

我有一个带有表单的页面。在此表单中，用户可以使用键和值添加多行。有一个限制是customFields是动态创建的，而不是来自任何订阅的集合。 ... HTML

<template name="main">
{{#each customFields}}
                    <div>
                        <input type="text" value="{{key}}"/>
                        <input type="text" style="width: 300px;" value="{{value}}"/>
                    </div>
                {{/each}}
</template

.... router.js

Router.route 'products.add',
  path: '/products/add/:_id'
  data:
    customFields:[]

... products.js

#using customFieldSet as Reactive Var from meteor package
Template.product.created = ->
  @customFieldSet = new ReactiveVar([])


Template.product.rendered = ->
  self = this
  Tracker.autorun ->
    arr = self.customFieldSet.get()
    self.data.customFields = arr
Template.product.events(
'click .productForm__addField': (e)->
t = Template.instance()
    m = t.customFieldSet.get()
    console.log t
    m.push(
      key: ''
      value: ''
    )
    t.customFieldSet.set m

....

单击按钮时将触发最后一个事件。并且它会向页面添加另一行，其中键和值为空。

请告诉我为什么我实际看到更新了反应变量 customFieldSet ，但html中没有动态更改。

P / s：我想我的customFields不是通过Iron路由器更新的。

Answer 1

基本上，你做对了。但是，您不应该将新的反应数据分配给模板的数据上下文，而是直接从您的帮助程序访问它：

Template.product.helpers({
  customFileds: function () {
    return Template.instance().customFiledsSet.get();
  },
});

现在，您可以在模板代码中使用{{customFields}}，它应该被动地运行。请记住，{{this.customFileds}}或{{./customFileds}}在这种情况下不起作用。

如何使用Reactivevar更新Meteor中的数据

1 个答案: