Question

我的一个Meteor模板中有一个选择输入，其中有三个数据与每个选择选项相关联。我试图将所有三个数据（作为对象）发送到一个新模板，该模板通过Blaze API在＆＃39;更改＆＃39;在用户选择后触发事件。我的印象是我可以使用Blaze.getData方法来做到这一点，但它似乎并不适合我。我想知道是否有人有使用此方法的经验，并可能能够帮助我排除故障。

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

此外，这是相关的变化＆＃39;事件代码：

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

有问题的模板 selectItem 没有数据上下文，这就是为什么这不起作用。 Blaze通过查找适当的帮助函数来渲染{{#each items}}，但此不是模板的数据上下文的一部分，因此您无法从事件处理程序中检索它。 / p>

解决此问题的最简单方法是在从周围的正文模板中调用 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())

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

Answer 2

您需要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。触发后，您将select中的event.target作为目标，price将获得event.target.value。

你可以用这个：

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

})

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

2 个答案: