javascript - Meteor:如何获取对象属性的响应式(Reactive)父/子依赖模板

Question

我正在 Meteor(使用 Blaze)上开发响应式(Reactive)依赖树，但我没有找到最好的方法。

一、问题

在此示例中，我有一个设置了 item 对象的容器，该对象具有属性 elements (数组)。

elements 属性是循环，并且会为其每个实例加载一个子模板。

可以在子模板上更新元素，但更新不会传播到容器。

此外，我还添加了一个 Add 按钮来更新 item ReactiveVar(来自 container)。每个字段渲染都会在容器上的 item 更新后更新，因此对象已更新但未重新渲染。

HTML

<template name="container">
  {{#let item=getItem}}
    <h1>Update {{item._id}}</h1>
    {{#each element in item.elements}}
      <div>
        {{> elementForm element}}
        <small>{{element.name}}</small>
      </div>
    {{/each}}
  {{/let}}
  <button name="add">Add</button>
</template>


<template name="elementForm">
  {{#let el=getEl}}
    <input value="{{el.name}}"/>
  {{/let}}
</template>

父模板

Template.container.onCreated(function onContainerCreated() {
  // From data
  let item = {
    _id: '123abc',
    elements: [
      {name: "El #1"},
      {name: "El #2"},
      {name: "El #3"},
    ]
  }
  // Create master ReactiveVar
  this.item = new ReactiveVar(item);
});

Template.container.helpers({
  getItem() {
    return Template.instance().item.get();
  },
});
Template.container.events({
  // Add a new element (Will refresh all elements render)
  'click button[name="add"]'(e) {
    let instance = Template.instance()
    let item = instance.item.get()
    item.elements.push({name: "new El"})
    instance.item.set(item)
  },
})

子模板

/* Element */
Template.elementForm.onCreated(function onElementCreated() {
  this.el = new ReactiveVar(this.data)
});
Template.elementForm.helpers({
  getEl() {
    return Template.instance().el.get()
  }
})
Template.elementForm.events({
  'change input'(e) {
    let instance = Template.instance()
    let el = instance.el.get()
    el.name = e.currentTarget.value
    instance.el.set(el)
  }
})

预览

由于 meteor 无法集成到嵌入代码中，所以我制作了一些图像。

默认页面

更新输入不影响容器渲染

添加一个新项目，将重新渲染所有容器并获取新值

解决方案 1 ？将 item ReactiveVar 发送给子级

我知道将整个 ReactiveVar 发送给 child 可以是在 child 上使用 .set() 方法的解决方案。

但是如果我使用这个 hack，我将不得不将整个 item 发送到每个 elementForm (不是最好的)

示例

/* Html */
<Template name="parentTemplate">
  <small>{{getFoo}}</small>
  {{> childTemplate getItem}}
</Template>
<Template name="childTemplate">
  <input value="{{getFoo}}" />
</Template>

/* Parent */
Template.parentTemplate.onCreated(function onParentCreated() {
  this.item = new ReactiveVar({ foo: bar})
});
Template.parentTemplate.helpers({
  getFoo() {
    return Template.instance().item.get().foo    
  },
  getItem() {
    return Template.instance().item // Send reactive var, net value (.get)
  }
})
/* Child */
Template.childTemplate.onCreated(function onChildCreated() {
  this.item = this.data.item // Use Parent Reactive var
});
Template.childTemplate.helpers({
  getFoo() {
    return Template.instance().item.get().foo    
  },
})
 Template.childTemplate.events({
  'change input'(e) {
    let item = Template.instance().item.get()   
    item.foo = e.currentTarget.value
    Template.instance().item.set(item) // Will update parent   
  },
})

解决方案2？回调

另一种解决方案是，除了元素数据之外，还向子模板发送每个操作(例如更改)的回调，以通知父模板更新特定元素的主 ReactiveVar。

示例

/* Html */
<Template name="parentTemplate">
  <small>{{getFoo}}</small>
  {{> childTemplate getData}}
</Template>
<Template name="childTemplate">
  <input value="{{getFoo}}" />
</Template>

/* Parent */
Template.parentTemplate.onCreated(function onParentCreated() {
  this.item = new ReactiveVar({ foo: bar})
});
Template.parentTemplate.helpers({
  getFoo() {
    return Template.instance().item.get().foo    
  },
  getData() {
    let instance = Template.instance()
    return {
      item: instance.item.get(),
      onChange: function(val) {
        // Update item here
        let item = instance.item.get()
        item.foo = val
        instance.item.set(item)
      }
    }
  }
})
/* Child */
Template.childTemplate.onCreated(function onChildCreated() {
});
Template.childTemplate.helpers({
  getFoo() {
    return Template.instance().data.item.foo    
  },
})
 Template.childTemplate.events({
  'change input'(e) {
    // Call parent callback
    Template.instance().data.onChange(e.currentTarget.value)  
  },
})

最后一个问题

处理父/子模板以处理项目对象中的元素列表的最佳方法是什么？

Answer 1

实际上是一个好问题。

恕我直言，根据具体情况，我主要采用您的解决方案 1。

类似于:

Template.container.onCreated(function(){
  //each elements are ReactiveVar
  let item = {
    _id: '123abc',
    elements: [
      {name: new ReactiveVar("El #1")},
      {name: new ReactiveVar("El #2")},
      {name: new ReactiveVar("El #3")},
    ]
  }
  // I don't wrap the wole item on a ReactiveVar if I don't need it.
});

然后，当您使用 #each 对其进行迭代时，您将仅将当前元素数据注入(inject)到子级的数据上下文中。从这里，您可以轻松地执行以下操作:

Template.childTemplate.helpers({
  getName() {
    return this.name.get();    
  },
})
 Template.childTemplate.events({
  'change input'(e, tp) {
    newVal = e.currentTarget.value
    tp.currentData().name.set(newVal); 
  }
});

我使用了一些“快捷方式”作为 Template.currentData() 并使用 this.name.get() 在助手上直接访问数据上下文。

您还可以直接访问模板实例作为事件的第二个参数:

'change input'(event, templateInstance) {}

我没有测试过，我只是给你一个想法。

希望这对您有帮助。