Svelte REPL 和本地输出的区别
Difference between Svelte REPL and local output
TL;DR:在线 REPL (Svelte 1.9.1) 有效,但本地已损坏。问题:我在本地做错了什么?
以下代码在 this REPL 中有效:
{{grades}}<br>
{{#each guesses as guess, i}}
{{#each guess as slot}}
{{slot}}
{{/each}}
=
{{ grades[i] }}
{{/each}}
<script>
export default {
data () {
return {
guesses: [
[0, 1, 1, 3, 6],
],
grades: [
[1, 2, 2],
],
}
},
};
</script>
也就是说,它产生输出:
1,2,2
01136 = 1,2,2
但是,在本地(Linux Mint 18.1,64 位上的 Svelte 1.9.1),完全相同的文件会产生以下输出:
1,2,2
01136 = undefined
如您所见,它可以正常访问 grades
,但不能访问 #each
循环中的 grades[i]
。控制台没有报错。
另外一件神秘的事情
如果我删除这些行:
{{#each guess as slot}}
{{slot}}
{{/each}}
...那么本地渲染就变成了:
1,2,2
= 1,2,2
那么 #each
块是如何突然使 grades[i]
未定义的...但仅限于本地?
其他环境信息
本地版本通过以下方式拉入:
Game.js
import Game from '../components/Game.html';
const GameComponent = new Game({
target: document.querySelector('main'),
});
export default GameComponent;
main.js
/* eslint-disable no-unused-vars */
import Game from './js/Game';
index.html
<!doctype html>
<html>
<head>
<title>CheaterMind</title>
<link rel="stylesheet" type="text/css" href="colours.css">
</head>
<body>
<main></main>
<script src='../dist/main.js' charset='utf-8'></script>
</body>
</html>
设置是 https://github.com/charpeni/svelte-example 的副本,我正在使用 npm run build:watch
。
使用 yarn upgrade svelte
.
本地 更新到 svelte 1.9.1
TL;DR:在线 REPL (Svelte 1.9.1) 有效,但本地已损坏。问题:我在本地做错了什么?
以下代码在 this REPL 中有效:
{{grades}}<br>
{{#each guesses as guess, i}}
{{#each guess as slot}}
{{slot}}
{{/each}}
=
{{ grades[i] }}
{{/each}}
<script>
export default {
data () {
return {
guesses: [
[0, 1, 1, 3, 6],
],
grades: [
[1, 2, 2],
],
}
},
};
</script>
也就是说,它产生输出:
1,2,2
01136 = 1,2,2
但是,在本地(Linux Mint 18.1,64 位上的 Svelte 1.9.1),完全相同的文件会产生以下输出:
1,2,2
01136 = undefined
如您所见,它可以正常访问 grades
,但不能访问 #each
循环中的 grades[i]
。控制台没有报错。
另外一件神秘的事情
如果我删除这些行:
{{#each guess as slot}}
{{slot}}
{{/each}}
...那么本地渲染就变成了:
1,2,2
= 1,2,2
那么 #each
块是如何突然使 grades[i]
未定义的...但仅限于本地?
其他环境信息
本地版本通过以下方式拉入:
Game.js
import Game from '../components/Game.html';
const GameComponent = new Game({
target: document.querySelector('main'),
});
export default GameComponent;
main.js
/* eslint-disable no-unused-vars */
import Game from './js/Game';
index.html
<!doctype html>
<html>
<head>
<title>CheaterMind</title>
<link rel="stylesheet" type="text/css" href="colours.css">
</head>
<body>
<main></main>
<script src='../dist/main.js' charset='utf-8'></script>
</body>
</html>
设置是 https://github.com/charpeni/svelte-example 的副本,我正在使用 npm run build:watch
。
使用 yarn upgrade svelte
.