Ractive.js中的模板

Question

I am new to Ractive.js and just playing around with it. 我是Ractive.js的新手，并且正在玩它。 I am trying to build a simple app, but strangely, it's not working on my pc and I am getting an error in console "Could not find template element with id #template", where #template refers to the id assigned to script tag. 我正在尝试构建一个简单的应用程序，但是奇怪的是，它无法在我的PC上正常工作，并且在控制台中出现错误“找不到ID为#template的模板元素”，其中#template是指分配给脚本标签的ID。 Nothing gets rendered on my browser. 我的浏览器没有任何内容。 However, the same code is running fine in JSFiddle. 但是，相同的代码在JSFiddle中运行良好。 Can someone explain what is happening here? 有人可以解释这里发生了什么吗？

Here is the 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>

Code in weather.js: weather.js中的代码：

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

Answer 1

At the time weather.js executes, the element hasn't yet been created. 在weather.js执行时，尚未创建该元素。 You could either move the <script src='weather.js'></script> tag to the bottom of the page (inside <body> , after the topmost <div> containing the template element the script refers to), or add a defer attribute: <script defer src='weather.js'></script> . 您可以将<script src='weather.js'></script>标记移到页面底部（在<body> ，在最上方的<div>包含脚本所引用的模板元素之后），或者添加defer属性： <script defer src='weather.js'></script> 。

Ractive.js中的模板

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-28 20:15:17

Ractive.js中的模板

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-28 20:15:17

解决方案1
0 已采纳 2016-06-28 20:15:17