首先在下拉列表中選擇jQuery

Question

我知道Meteor支持事件，但是我不確定第一次選擇某個項目時是否存在下拉點擊事件。 理想情況下，這只會在第一次選擇下拉列表中的項目時運行代碼，而不會在隨后的任何時間運行代碼。

這是html代碼：

        <select id="module-select" class="form-control">
            <option disabled="disabled" selected="selected">Select Assessment</option>
            {{#each modules}}
                 <option value="{{this.name}}">{{this.name}}</option>
            {{/each}}
        </select>

我正在使用以下模板代碼在選擇更改時執行某些操作，並且希望如此進行。

"change #module-select": function(event, template){
     var module_name = $(event.currentTarget).val()
     console.log("assessment: ", module_name)
     Session.set("Assessment_name", module_name)
 }

Answer 1

理想情況下，這只會在第一次選擇下拉列表中的項目時運行代碼，而不會在隨后的任何時間運行代碼

在您的情況下，無需特殊魔術即可解決此問題。 基本上，您需要一個僅允許運行一個方法的結構。

此結構的輸入是您的modules列表。 檢查模塊是否已加載的緩存是對象。 考慮以下模塊名稱列表和一個空對象：

Template.yourTemplate.onCreated(function() {
  const instance = this;
  instance.state = new ReactiveDict();
  instance.state.set('modules', ['a', 'b', 'c']);  
  instance.state.set('loaded', {});
});

您可以加載模塊，然后向該模塊已加載的對象添加一個條目：

// outside the template functions
function loadOnce(module, templateInstance) {
  const loaded = templateInstance.state.get('loaded');

  // return if already loaded
  if (loaded[module]) return;

  // else load module and set as loaded
  Session.set("Assessment_name", module_name)
  loaded[module] = true;
  templateInstance.state.set('loaded', loaded);
}

Template.yourTemplate.events({
  "change #module-select": function(event, template){
    var module_name = $(event.currentTarget).val()
    loadOnce(module_name, template); 
  }
});

現在，這可以解決一次加載的問題，但可能無法解決問題，因為您的選擇列表仍然包含要選擇的元素。

因此，如果要刪除選項中的元素，則也可以從modules數組中刪除該元素。 然后它將不再是可選的。

function loadOnce(module, templateInstance) {
  const loaded = templateInstance.state.get('loaded');
  const modules = templateInstance.state.get('modules');
  // return if already loaded
  if (loaded[module]) return;

  // else load module and set as loaded
  Session.set("Assessment_name", module_name)
  loaded[module] = true;
  modules.splice(modules.indexOf(module), 1);
  templateInstance.state.set('loaded', loaded);
  templateInstance.state.set('modules', modules);
}

關於安全性的一般注意事項：這不會阻止客戶端加載模塊（如果他們願意）。 這只是UI / UX功能，如果需要的話，不會阻止某人加載模塊。

Answer 2

如果您不想將會話變量“ Assessment_name”設置為相同的值兩次，我想這是為了避免此設置的其他副作用。 因此，我假設您只想再次阻止該設置（如果該設置是該變量的當前值），那么如果會話變量設置為下拉列表中另一個項目的值，即使更改了它也不會介意，即使它更改為的項目是過去某個時間選擇的。 因此，如果這些假設正確，則只需檢查您的會話變量的值就足以防止設置相同的值：

"change #module-select": function(event, template){
     var module_name = $(event.currentTarget).val()
     console.log("assessment: ", module_name)
     if (Session.get("Assessment_name") !== module_name) {
       Session.set("Assessment_name", module_name)
     }
   }