Ractive.js 中的模板

Question

我是 Ractive.js 的新手，只是在玩弄它。我正在尝试构建一个简单的应用程序，但奇怪的是，它无法在我的电脑上运行，而且我在控制台 "Could not find template element with id #template" 中收到错误消息，其中 #template 指的是分配给脚本标签的 ID。我的浏览器上没有呈现任何内容。但是，相同的代码在 JSFiddle 中运行没问题。有人可以解释这里发生了什么吗？

Here 是 fiddle.

<!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> 标记移动到页面底部（在 [=11= 内]，在包含脚本引用的模板元素的最顶部 <div> 之后），或者添加 defer属性：<script defer src='weather.js'></script>.

Ractive.js 中的模板

Templates in Ractive.js

javascript

ractivejs