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