如何使用Blaze.getData（）從Meteor中的視圖中提取數據上下文

Question

我的Meteor模板之一中有一個select輸入，它具有與每個select選項相關的三段數據。 我正在嘗試將所有三個數據（作為對象）發送到新模板，該模板通過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'));
  }
});

Answer 1

有問題的模板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())

但是，這將使用私有方法，因此不建議這樣做。 另外，無論如何它將重新運行該幫助程序，而不會真正返回同一運行的結果，這似乎是您所追求的。

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)獲取選中的Item

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 個解決方案

解決方案1
5 已采納 2015-01-30 15:18:23

解決方案2
2 2015-01-30 13:21:34

如何使用Blaze.getData（）從Meteor中的視圖中提取數據上下文

問題描述

2 個解決方案

解決方案1 5 已采納 2015-01-30 15:18:23

解決方案2 2 2015-01-30 13:21:34

解決方案1
5 已采納 2015-01-30 15:18:23

解決方案2
2 2015-01-30 13:21:34