但是如何显示点击切换或动画元素的交互呢? 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");
});
最佳答案
您可以将点击状态存储在 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({}); }
});
关于javascript - 如何使用 Meteor 在所有连接的浏览器 session 中显示 .toggle 或 .Animate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35231417/