如何显示 .toggle 或 .使用 Meteor 对所有连接的浏览器会话进行动画处理

How to display .toggle or .Animate to all connected browser sessions using Meteor

本文关键字：浏览器 连接 会话 处理 动画 显示 何显示 toggle Meteor 使用      更新时间：2023-09-26

但是你如何显示点击切换或动画元素的交互作用呢？流星检查器示例：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");
  });

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

例如，您可以通过以下方式执行此操作：

对于每个棋桌，您可以创建单独的文档在服务器端：

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

然后，状态将在每个连接的客户端上被动更改。当然，您需要像这样在 html 中反映这些更改：

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

在客户端代码中：

Template.chessboard.helpers({
  ChessTableCells: function() { return ChessTableCell.find({}); }
});
相关文章：