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

Question

我在我的一个 Meteor 模板中有一个 select 输入，每个 select 选项都有三个数据片段。我正在尝试将所有三段数据（作为一个对象）发送到一个新模板，该模板通过 Blaze API 在用户 selection 后触发的 'change' 事件上呈现。我的印象是我可以使用 Blaze.getData 方法来执行此操作，但它似乎对我不起作用。我想知道是否有人有使用此方法的经验并且可以帮助我进行故障排除。

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

此外，这里是相关的 'change' 事件代码：

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'));
  }
});

Answer 1

您需要 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

})

编辑：

对不起，我没有看你的 Meteorpad。

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

你可以使用这个：

1.build 你的数据在一个集合中

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.Iterate 遍历项目并给出 _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.Use Items.findOne(event.target.value)获取选中的Item

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

})

Answer 2

有问题的模板 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() 从 Meteor 中的视图中提取数据上下文

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

javascript

meteor

meteor-blaze

spacebars