Question

我创建了一个脚本来显示我的网站上的天气，我执行时遇到的问题什么都没有显示。

这是我的剧本：

<!DOCTYPE html>
<html>
<head>
<title>Weather API Test</title>
</head>
<body>
<script type="text/html" id="weather_tmpl">
    <div class="weather_wrapper">
        <div class="top_wrapper top_wrapper_e">
            {{=day0}}
            <div class="bt_control" id="meteo_controller">
                <a href="javascript://">
                    <img src="arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
                </a>
            </div>
        </div>
        <div class="bottom_wrapper" id="meteo_future_days">
            <div class="next_days_wrapper">
                <div class="day first">
                    {{=day1}}
                    <div class="clear"></div>
                </div>
                <div class="day">
                    {{=day2}}
                    <div class="clear"></div>
                </div>
                <div class="day last">
                    {{=day3}}
                    <div class="clear"></div>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
</script>

<script type="text/html" id="detail_tmpl">
    <div class="date">{{=date.weekday}},
        <br />{{=date.day}} {{=monthname_short}}.</div>
    <div class="temp">{{=high.celsius}}</div>
    <div class="icon">
        <img src="{{=icon_url}}" width="34" height="34" alt="icone" />
    </div>
</script>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="t.min.js"></script>

<script type='text/javascript'>
    (function(){
        var mainTpl = new t($('#weather_tmpl').html()),
            detailTpl = new t($('#detail_tmpl').html());

 $.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
            .done(function(data){
                var tplData = {};
                $.each(data.forecast.simpleforecast.forecastday, function(index, day){
                    tplData['day'+index] = detailTpl.render(day);
                });
                $('body').append(mainTpl.render(tplData));
            });
    })();
</script>
    <script>
          var meteostatus = 0; // closed
          $('#meteo_controller').click(function() {
          if (meteostatus == 0) {
          meteostatus = 1;
          $('#meteo_future_days').fadeIn('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
          } else {
          meteostatus = 0;
          $('#meteo_future_days').fadeOut('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
          }
          });
         </script>
</body>
</html>

PS：

当天的数据以及接下来3的预测都在数组data.forecast.simpleforecast.forecastday中。

我使用了一个名为t.js的模板库，您可以找到here

度过愉快的一天

Answer 1

将scripts的两个（ID为library，t.min.js的}替换为：

<script src="https://github.com/jasonmoo/t.js/blob/master/t.min.js" />
<script type="https://github.com/jasonmoo/t.js/blob/master/template" id="test">
(function(){
        var mainTpl = new t($('#weather_tmpl').html()),
            detailTpl = new t($('#detail_tmpl').html());

 $.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
            .done(function(data){
                var tplData = {};
                $.each(data.forecast.simpleforecast.forecastday, function(index, day){
                    tplData['day'+index] = detailTpl.render(day);
                });
                $('body').append(mainTpl.render(tplData));
            });
    })();
          var meteostatus = 0; // closed
          $('#meteo_controller').click(function() {
          if (meteostatus === 0) {
          meteostatus = 1;
          $('#meteo_future_days').fadeIn('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
          } else {
          meteostatus = 0;
          $('#meteo_future_days').fadeOut('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
          }
          });

</script>

您尝试将脚本src作为本地路径放在服务器上，该文件存放在github上。

此外，还有一个脚本错误。

为什么我的剧本不显示天气

1 个答案: