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列表。检查模块是否已加载的缓存是Object。考虑以下模块名称列表和一个空对象：

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

首先在下拉列表中选择jquery

2 个答案: