如何使用 Blaze.getData(） 从 Meteor 中的视图中提取数据上下文

How to pull the data context from a view in Meteor using Blaze.getData()

本文关键字：视图 提取 上下文 数据 Meteor Blaze 何使用 getData      更新时间：2023-09-26

我在我的一个 Meteor 模板中有一个选择输入，其中包含与每个选择选项关联的三条数据。我正在尝试将所有三条数据（作为对象）发送到一个新模板，该模板通过 Blaze API 在用户选择后触发的"更改"事件上呈现。我的印象是我可以使用 Blaze.getData 方法来做到这一点，但它似乎对我不起作用。我想知道是否有人有任何使用此方法的经验，并且可以帮助我进行故障排除。

我设置了一个MeteorPad，其中包含我在这里尝试执行的操作的示例：http://meteorpad.com/pad/69XGm5nWPutg8an7T/Select%20Item

此外，以下是相关的"更改"事件代码：

Template.selectItem.events({
  'change .select_item': function(event) {
    event.preventDefault();
    var view = Blaze.getView(event.target);
    console.log(view); // me debugging
    var item = Blaze.getData(view);
    console.log(item); // me debugging
    Blaze.renderWithData(Template.selectedResults, item, document.getElementById('results'));
  }
});

有问题的模板 selectItem 没有数据上下文，这就是它不起作用的原因。 Blaze 通过查找相应的帮助程序函数来呈现{{#each items}}，但这不是模板数据上下文的一部分，因此无法从事件处理程序中检索它。

解决此问题的最简单方法是在从周围的正文模板调用 selectItem 模板时设置该模板的数据上下文，如下所示：

Template.body.helpers({
  items: function() {
    return Items.find(); //or Items, or whatever
  }
});

和

<body>
  <h1>Select an item</h1>
    {{> selectItem items=items}}
  <div id="results"></div>
</body>

这样，您在事件处理程序中检索的数据上下文将包含 items ，尽管您随后如何处理它取决于您。

如果你想继续按照你的方式做事，明智的做法就是直接拿起 items 数组，因为它在你的事件处理程序的 JS 范围内。 如果你真的想通过帮助程序函数做事，你可以尝试：

Template.selectItem.__helpers[' items'].apply(Template.instance())

但是，这将使用私有方法，实际上不建议使用。另外，无论如何，它都会重新运行帮助程序，而不是真正返回相同运行的结果，这似乎是您所追求的。

你需要

Blaze.getData才能从元素中获取数据，否则：

 Template.selectItem.events({
    'change .select_item': function(event,template) {
     this//->data from event.target
     template.data //->data from current template
     Blaze.getData(event.target)//data from event.target
})

编辑：

我没有看你的流星垫对不起。

您的

活动已绑定到您的select。当它被触发时，您将在event.target中将select作为目标，您将在event.target.value中获得price。

你可以使用这个：

1.在集合中构建数据 

var Items = new Mongo.Collection(null)
[
  {
    price: 500,
    name: 'apple',
    unit: 'bushel'
  },
  {
    price: 1000,
    name: 'bananas',
    unit: 'kilo'
  },
  {
    price: 2000,
    name: 'cake',
    unit: 'slice'
  }
].forEach(function(o){
    Items.insert(o)
});

2.遍历项目并给出_id作为值

Template.selectItem.helpers({
  items: function()
  {
    return Items.find()
  }
});

<template name="selectItem">
  <select name="item" class="select_item" style="width: 50%;">
    <option></option>
    {{#each items}}
      <option value="{{this._id}}">{{this.name}}</option>
    {{/each}}
  </select>
</template>

3.使用Items.findOne(event.target.value)获取所选项目

Template.selectItem.events({
    'change .select_item': function(event,template) {
     Blaze.renderWithData(Template.selectedResults,   Items.findOne(event.target.value), document.getElementById('results'));
})
相关文章：