javascript - 如何在 Javascript 中单击 `<a>` 时更改 session 变量

Question

我无法找到一种方法让它在不使用 PHP 的情况下工作，而且我不想使用 PHP。问题是我有一个包含一些选项的列表:

我想在单击一个链接时设置一个 session 变量。

我尝试过<a onClick="displayAllContainers();">All containers</a>然后在我的 JS 中我尝试这样做

`function displayAllContainers() {
  console.log("Display all");
}`

但是没有成功。

[编辑] 这个 fiddle 不起作用，但我可以放置所有代码，而无需提出 500 行的问题，所以

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session'
import { InfosContainers } from '/both/collections/infosContainers.js';
import { InfosMachines } from '/both/collections/infosMachines.js';

import './main.html';
import '../imports/ui/controlPanel.js';
import '../imports/ui/container.js';
import '../imports/ui/machine.js';
import '../imports/ui/chart.js';
import '../imports/ui/controlPanel.html';
import '../imports/ui/container.html';
import '../imports/ui/machine.html'


if (Meteor.isClient) {
  //subscribe the publication of the server
  Meteor.subscribe('infosContainers');
  Meteor.subscribe('infosMachines');
}


function displayAllContainers() {
  console.log("Display all");
}


Template.body.onRendered(function () {
});


Template.body.helpers({
  //return all objects of the collection machines with the specified state
  infosMachines() {
    return InfosMachines.find({});
  },
  //return all objects of the collection containers with the specified state
  infos(state) {
    return InfosContainers.find({stateContainer: state});
  },
  //return all containers
  infosCtn(){
    return InfosContainers.find({});
  },
  //return true if we have >=1 container running. It's the emergency button
  urgence() {
    return InfosContainers.find({stateContainer: 'running'}).count() > 0;
  }
});

  <!-- form containers -->
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <h2>Containers</h2>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                              <li><a onClick="displayAllContainers();return false;">All containers</a>
                                              </li>
                                              <li><a href="#">Only running containers</a>
                                              </li>
                                              <li><a href="#">Only paused containers</a>
                                              </li>
                                              <li><a href="#">Only stopped containers</a>
                                              </li>
                                            </ul>
                                        </li>
                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <br/>
                                    {{#each infosCtn}}
                                      {{> container}}
                                    {{/each}}
                                </div>
                            </div>
                        </div>
                        <!-- /form containers -->

Answer 1

您需要返回 false 以阻止默认的点击行为。 只需这样更改即可:

<a onClick="displayAllContainers();return false;">All containers</a>