Question

我是Ractive.js的新手，只是玩弄它。我正在尝试构建一个简单的应用程序，但奇怪的是，它不能在我的电脑上工作，我在控制台中遇到错误“无法找到带有id #template的模板元素”，其中#template指的是分配给脚本标记的id。我的浏览器上没有任何内容呈现。但是，相同的代码在JSFiddle中运行良好。有人能解释一下这里发生了什么吗？

Here是小提琴。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>Get Weather Details</title>
<meta name="description" content="Get weather for your city">

<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="weather.css">
<script src='https://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="weather.js"></script>
</head>

<body>
<div id="main" class="page-container">
    <script id='template' type='text/ractive'>
        <div class="weather-widget">
            <div class="input-group">
                <label>City Name</label>
                <input type="text" class="form-control" placeholder="Enter City Name" />
            </div>
            <div class="input-group">
                <label>Recent Searches</label>
                <select>
                    <option>Select from recent searches</option>
                </select>
            </div>

            <div class="weather-details">
                <table>
                    <tbody>
                        <tr>
                            <th>Wind</th>
                            <td>{{country}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
</div>
</body>
</html>

weather.js中的代码：

var ractive = new Ractive({
el: '#main',
template: '#template',
data: {
    country: 'London'
    }
});

Answer 1

当weather.js执行时，尚未创建该元素。您可以将<script src='weather.js'></script>标记移动到页面底部（在<body>内，在包含脚本引用的模板元素的最顶层<div>之后），或者添加defer } attribute：<script defer src='weather.js'></script>。

Ractive.js中的模板

1 个答案: