Question

为什么帮助器calcFoo重新运行，即使单击div后数组中的元素不再存在？我猜是因为calcFoo - 帮助器取决于fooRD并在foo - 助手重新运行之前重新运行。有没有办法控制重新计算顺序，以便首先重新计算foo，而calcFoo不再需要重新运行（对于已删除的元素）？

foo.js

if (Meteor.isClient) {
    Template.foo.onCreated(function() {
        this.fooRD = new ReactiveDict()
        this.fooRD.set('field', [1,2])
    })

    Template.foo.helpers({
        foo: function() {
            ti = Template.instance()
            return ti.fooRD.get('field')
        },
        calcFoo: function(v) {
            ti = Template.instance()

            // establish dependency
            ti.fooRD.get('field')
            console.log("run: " + v)
            return v * 2
        }
    })

    Template.foo.events({
        'click': function (e, t) {
            ti = Template.instance()
            field = ti.fooRD.get('field')
            field.pop()
            ti.fooRD.set('field', field)
        }
    })

}

foo.html

<body>
  {{> foo}}
</body>

<template name="foo">
    {{#each foo}}
        <div class="foo">{{calcFoo this}}</div>
    {{/each}}
</template>

到目前为止

我的解决方法（在这种简单的情况下可以正常工作，但在更复杂的情况下却无效）：

calcFoo: function(v) {
    ti = Template.instance()

    field = ti.fooRD.get('field')
    if (field.indexOf(v) != -1)
        console.log("run: " + v)
        return v * 2
}

Answer 1

使用这个新助手， calcFoo 不再被称为：

Template.foo.helpers({
    hasFoo: function(v) {
        ti = Template.instance()
        return ti.fooRD.get('field').length > 0;
    }
})

<template name="foo">
  {{#if hasFoo}}
      {{#each foo}}
          <div class="foo">{{calcFoo this}}</div>
      {{/each}}
  {{/if}}
</template>

如何控制助手的重新计算顺序

1 个答案: