언어 설정

Menu
Sites
Language
Dynamically adding fetched items to a listview
 
HTML
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header>
<h2 class="ui-title">TAU List</h2>
</header>
<div class="ui-content">
<ul id="currentlist" class="ui-listview">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/app.js"></script>
</body>
</html>
 
Script file
 
<script>
$.ajax({
type: "GET",
url: 'x'
dataType: 'JSON',
success: function(data) {
//test
data = 3;
$('#currentlist').append('<li>' + data + '</li>');
}
}); 
</script>
 
I have already tried the tau.widget.ListView and it's useless.
 
var element = document.getElementById("currentlist"),
list = tau.widget.Listview(element);
list.addItem("<li>3</li>", 3); //this is not a function
list.refresh(); //this does nothing
 
I don't understand why this is so hard to do. Someone explain what's wrong with this.

Responses

1 댓글
Erik van Gompel

I encountered exactly the same issue and spend a lot of time in understanding and resolving this problem.

I solved the problem by reloading the page after after having updated the ListView using `location.reload()`.
Also I realized this may not be applicable to all situations or may need some adaptation of the existing scripts.