Ractive.js中的模板

Question

我是Ractive.js的新手，並且正在玩它。 我正在嘗試構建一個簡單的應用程序，但是奇怪的是，它無法在我的PC上正常工作，並且在控制台中出現錯誤“找不到ID為#template的模板元素”，其中#template是指分配給腳本標簽的ID。 我的瀏覽器沒有任何內容。 但是，相同的代碼在JSFiddle中運行良好。 有人可以解釋這里發生了什么嗎？

這是小提琴。

<!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屬性： <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