我如何使html select選項在Meteor中工作？

Question

我在獲取HTML Select Options時遇到麻煩，我認為它應該在Meteor中工作。

這是一個示例，說明如何使用該按鈕與一個名為“國家/地區”的集合中的按鈕一起使用。

模板

{{#each get_countries}}
  <button class="btn btnCountryTest">{{iso3}} - {{name}} </button><br />
{{/each}}

客戶端事件處理程序

'click .btnCountryTest': function(event){
   console.log('clicked .btnCountryTest this._id: ' + this._id);
}

產生正確的輸出，例如。

clicked .btnCountryTest this._id: 39cd432c-66fa-48de-908b-93a874323e2e

現在，我想做的是，當從“ HTML選擇選項”下拉列表中選擇一項時，觸發其他頁面活動。 我知道我可以將ID放在options值中，然后使用Jquery等...我認為它可以與Meteor一起使用，但是我不知道該怎么做。

這是我正在嘗試的方法，它不起作用。

模板

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}">{{name}}</option>
  {{/each}}
</select>

處理程序

'click #country': function (event) { 
  console.log('Template.users_insert.events click .country this._id: ' + this._id);
 }

哪個產生

Template.users_insert.events click .country this._id: undefined

顯然不是我所期望的。 在訴諸Jquery表單處理之前，有任何想法嗎？

謝謝史蒂夫

Answer 1

在Meteor中， each幫助程序都調用Meteor.ui.listChunk （請查看packages / templating / deftemplate.js），它將當前變量視為this上下文。

換句話說，它是click #country的全局上下文，您只能在each塊下訪問this._id ，就像在click #country option事件中一樣。

我認為您可以將數據放在HTML數據屬性中，並使用jQuery訪問它。 像這樣 -

模板

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}" data-id={{_id}}>{{name}}</option>
  {{/each}}
</select>

處理

'click #country': function (event) { 
  console.log('Template.users_insert.events click .country this._id: ' + $(event.currentTarget).find(':selected').data("id"));
 }

Answer 2

如果要訪問數據上下文，則需要讓事件處理程序可以訪問template參數，並使用它的data對象。 那是頂層數據上下文。

'click #country': function (event, template) { 
    console.log('Template.users_insert.events click .country _id: ' + template.data._id);
}

應該管用。 這是我可以找到的最佳文檔： http : //docs.meteor.com/#template_data

Answer 3

@StevenCannon，我也有類似的問題，在這里找到了解決辦法- http://www.tutorialspoint.com/meteor/meteor_forms.htm 。 @DenisBrat是正確的，偵聽change事件而不是click事件。

這是為您修改的解決方案：

'change select'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    var selectedCountry = event.target.value;

    console.log('Template.users_insert.events change select iso3: ' + selectedCountry);
}

Answer 4

您正在偵聽select的“ click”事件。 您真的很想訂閱“更改”事件。 當您單擊html元素時，將發生“單擊”。 另一方面，從列表中選擇一個值后，將觸發“更改”事件。

Answer 5

也許您也可以看看“ packages / liveui / liveui.js”。 有一個findEventData函數，該函數為回調提供this對象。