如何使用 BlazeJS 在 MeteorJS 中一起使用 Chessboard.js 和 Chess.js？

Question

我有一个新的 MeteorJS 项目，我只安装了 chessboardjs and 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

这里有三个问题。

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

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 中不起作用，因为 回调在 第一次呈现模板之前被调用。

How to use Chessboard.js and Chess.js together in MeteorJS using BlazeJS?