如何删除已使用把手填充的页面上的先前结果 [英] how to remove previous results on the page which have been populated using handlebars
本文介绍了如何删除已使用把手填充的页面上的先前结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
第二次点击按钮，我想删除以前的结果。我该怎么做？
HTML文件
< ！doctype html >
< html >
< head >
< title > Twitter < / title >
< meta charset = utf-8 / >
< link rel = stylesheet type = text / css href = twitter.css >
< / head >
< 正文 >
< 输入 type =' textbox' 值 =' paris' id =' city' > < / input >
< 按钮 < span class =code-attribute> id =' btnCity' > 获取< / button >
< ul < span class =code-attribute> class =' container' >
< script id = weather-template type = text / x-handlebarstemplate >
< li class =' 天气列表' >
< p > {{name}} < / p >
< p > 纬度：{{coord.lat}} < / p >
< p > 经度：{{coord.lon}} < / p >
< p > 风度： {{wind.deg}} < / p > ;
< p > 风速：{{wind.speed}} < / p >
< / li >
< / script >
< / ul >
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery。 min.js > < / script >
< script src = https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui。 min.js > < / script >
< script type = text / javascript src = handlebars-v3.0.0.js > < / script >
< script type = text / javascript src = twitter.js > < / script >
< script >
（ function （） {
var txtCity = $（' ＃城市'）;
var liWeather = $（' 。weather -list）;
$（' ＃btnCity'）。on（ 点击， function （）{
var url = ' http：// api.openweathermap.org/data/2.5/weather?q='<+ txtCity.val（）;
var twitter = new Twitter（{
url：url，
模板：$（' ＃weather-template'）。html（），
容器：$（' ul.container'）
}）;
twitter.fetch（）;
}）
}（））;
< / script >
< / body >
< / html >
JS文件
// （function（）{
/ * var Twitter = {
init ：function（）{
this.url ='http：//api.openweathermap.org/data/2.5/weather？q = delhi';
}
} * /
function Twitter（config）{
// < span class =code-comment> console.log（config）;
this .url = config.url，
this .template = config.template，
this .container = config.container
}
Twitter.prototype.attachTemplate = function （）{
// console.log（this.template） ;
// console.log（this.weather）;
var template = Handlebars.compile（ this .template）;
var html = template（ this .weather）;
this .container.append（html）;
};
Twitter.prototype.fetch = function （）{
console .log（ this .url）;
var self = 此;
$ .getJSON（ this .url， function （data）{
self .weather = {
name：data.name，
coord：{
lat：data.coord.lat，
lon：data.coord.lon
}，
wind：{
deg：data.wind.deg，
speed：data.wind.speed
}
}
self.attachTemplate（）;
// self.display（）;
}） ;
};
Twitter.prototype.display = function （）{
console .log（ this .weather）;
console .log（ this .weather.coord）;
console .log（ this .weather.wind）;
};
// }）（）;
解决方案
（' #city' ）;
var liWeather =
（' 。weather-list'）;
（' ＃btnCity'）。on（' click'，< span class =code-keyword> function （）{
var url = ' http://api.openweathermap.org/data/2.5/weather?q=' + txtCity.val（）;
var twitter = new Twitter（{
url：url，
模板：
On clicking on the button second time , i want to remove the previous results. How can i do that?
HTML file
<!doctype html>
<html>
<head>
<title>Twitter</title>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="twitter.css">
</head>
<body>
<input type='textbox' value='paris' id='city'></input>
<button id='btnCity' >Get</button>
<ul class='container'>
<script id="weather-template" type="text/x-handlebarstemplate">
<li class='weather-list'>
<p>{{name}}</p>
<p>Latitude : {{coord.lat}}</p>
<p>Longitude : {{coord.lon}}</p>
<p>Wind Degree : {{wind.deg}}</p>
<p>Wind Speed : {{wind.speed}}</p>
</li>
</script>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="handlebars-v3.0.0.js"></script>
<script type="text/javascript" src="twitter.js"></script>
<script>
(function(){
var txtCity = $('#city');
var liWeather = $('.weather-list');
$('#btnCity').on('click',function(){
var url = 'http://api.openweathermap.org/data/2.5/weather?q='+ txtCity.val();
var twitter = new Twitter({
url : url,
template : $('#weather-template').html(),
container : $('ul.container')
});
twitter.fetch();
})
}());
</script>
</body>
</html>
JS file
//(function(){
/*var Twitter ={
init: function(){
this.url = 'http://api.openweathermap.org/data/2.5/weather?q=delhi';
}
}*/
function Twitter(config ){
//console.log(config);
this.url = config.url,
this.template = config.template,
this.container = config.container
}
Twitter.prototype.attachTemplate = function() {
//console.log(this.template);
//console.log(this.weather);
var template = Handlebars.compile(this.template);
var html = template(this.weather);
this.container.append(html);
};
Twitter.prototype.fetch = function() {
console.log(this.url);
var self = this;
$.getJSON(this.url,function(data){
self.weather = {
name : data.name,
coord : {
lat : data.coord.lat,
lon : data.coord.lon
},
wind : {
deg :data.wind.deg,
speed : data.wind.speed
}
}
self.attachTemplate();
// self.display();
});
};
Twitter.prototype.display = function() {
console.log(this.weather);
console.log(this.weather.coord);
console.log(this.weather.wind);
};
//})(); 解决方案
('#city'); var liWeather =
('.weather-list');
('#btnCity').on('click',function(){ var url = 'http://api.openweathermap.org/data/2.5/weather?q='+ txtCity.val(); var twitter = new Twitter({ url : url, template :
这篇关于如何删除已使用把手填充的页面上的先前结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
