Question

我正在尝试为用户提供如下按钮：

<select id="test" class="btn btn-default btn-lg">
    <option>Admin</option>
    <option>Employee</option>
</select>

并根据所选的选项，将显示另一个按钮以及其他选项。

这是我的代码：

Template.addingUser.helpers({
    userType: function () {
        if(t.find('#test').value == "Admin"){

        }else{

        }
    },

});

如果没有记错的话，我可以使用类似的东西：

$('#action-button').html('<a class="btn btn-primary edit_button"  href="' + Template.addingUser.__helpers.get('item')().sourceCode + '" onclick="">Download</a>');

如果是action-button，那么select选项呢？

或者我应该采用不同的方法来实现我的目的吗？

Answer 1

你的代码可以工作，但我们不应该在Meteor中做什么。相反，您应该将选定的选项值设置为反应性数据源，当它发生更改时，您可以通过帮助程序轻松按下该按钮：

const selectedValue = new ReactiveVar('default_value');

Template.addingUser.helpers({
  userType() {
    if (selectedValue.get() === 'Admin') {
      // return somehitng
    } else {

    }
  },
});

Template.addingUser.events({
  'change #test': function(e) {
    selectedValue.set(e.target.value);
  },
});

在此示例中，我使用ReactiveVar使选定的选项值处于反应状态。

<强>更新

的.js

const selectedValue = new ReactiveVar('default_value');

Template.addingUser.helpers({
  isAdmin() {
    return selectedValue.get() === 'Admin';
  },
  isNormalUser() {
    return selectedValue.get() === 'User';
  },
});

Template.addingUser.events({
  'change #test': function(e) {
    selectedValue.set(e.target.value);
  },
});

html的

<template name="addingUser">
  <!-- ... -->

  {{#if isAdmin}}
    <button>Button for admin</button>
  {{/if}}

  {{#if isNormalUser}}
    <button>Button for normal user</button>
  {{/if}}

  <!-- .. .-->
</template>

如何根据用户选择提供新按钮？

1 个答案: