如何使用 BlazeJS 在 MeteorJS 中同时使用 Chessboard.js 和 Chess.js？

Question

我有一个新的 MeteorJS 项目，我只安装了 chessboardjs 和 chessjs 如下

meteor npm install --save chessboardjs
meteor npm install --save chess.js

在我的客户端main.js我也导入了上面的包如下；

import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';

根据chessboardjs文档，显示棋盘的方式如下；

对于html

<div id="board1" style="width: 400px"></div>

对于 JS

var board1 = Chessboard('board1', 'start')

我的问题是如何在 MeteorJS 中显示它以及如何让两个国际象棋 npm 包一起工作？

任何工作示例都将受到高度赞赏。

也许我还应该提到，整个目的是进行两人游戏。

Answer 1

这里有三个问题。

1. 导入拼写错误
2. 导入 css
3. 渲染

首先，您的导入和调用的函数必须相同。你的进口是

import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';

但他们应该是

import Chessboard from 'chessboardjs';
import Chessjs from 'chess.js';

其次，npm 包导入通常不会自动导入 css。您需要在node_modules/chessboardjs 文件夹中主动找到它的路径并导入它：

import 'chessboardjs/www/css/chessboard.css'

最后，如果目标元素（id 为 board1 的 div）尚未渲染，Chessboard 函数无法将代码注入 DOM。

要解决此问题，您需要在 onRendered 内调用它：

Template.myTemplate.onRendered(function () {
  var board1 = Chessboard('board1', 'start')
})

它在onCreated 中不起作用，因为onCreated 回调是在在模板第一次渲染之前调用的。

见http://blazejs.org/api/templates.html#Template-onRendered