javascript - 如何使用 Meteor 在所有连接的浏览器 session 中显示 .toggle 或 .Animate

Question

但是如何显示点击切换或动画元素的交互呢？ meteor 跳棋示例: http://checkers.meteor.com/

在下面的示例中，我希望连接到 Meteor 服务器的每个浏览器都能够看到其他浏览器之一何时进行形状​​更改。

https://jsfiddle.net/qh2jyL3b/

HTML:

<div class="square"></div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

CSS:

.square {
  width: 100px;
  height: 100px;
  background: white;
  border: 10px solid black;
  cursor: pointer;

}

JavaScript:

$(".square").click(function() {
    $( this ).toggleClass("circle");
  });

Answer 1

您可以将点击状态存储在 Meteor.Collection 中。集合中的更改会以 react 方式传播给所有连接的客户端。只需为每个方 block 创建单独的文档并在此处保存状态即可。然后，您可以创建根据数据库项显示正确类名的帮助程序。

例如，您可以这样做:

对于每个国际象棋 table ，您可以创建单独的文档在服务器端:

ChessTableCell = new Mongo.Collection('chesstablecell');

然后您可以将每个单元格的状态存储在每个文档中。所以最初你可以插入

ChessTableCell.insert({name: 'a1', state: false);
ChessTableCell.insert({name: 'a2', state: false);

...etc

在您的客户端，您可以访问如下单元格状态:

ChessTableCell.findOne({name: 'a1'}).state;

单击时，您只需切换单击单元格的状态。您可以通过以下方式完成:

Template.chessboard.events({//or whatever your template is called like
    'click .cell': function(e,t) {
      var cellName = $(e.target).data('name'); //if you specify cell name in your html in data-name attribute
      var cellValue = ChessTableCell.findOne({name: cellName}).state;
      //here you can update the value
      ChessTableCell.update({name: cellValue}, {$set: { state: !cellValue}});
    }
});

然后状态将在每个连接的客户端上发生 react 性改变。当然，您需要在 html 中反射(reflect)这些更改，如下所示:

{{#each ChessTableCells}}
  <div class="cell {{#if state}}active{{/if}}" data-name="{{name}}"></div>
{{/each}}

在您的客户端代码中:

Template.chessboard.helpers({
  ChessTableCells: function() { return ChessTableCell.find({}); }
});