我有以下代码。
<html>
<head>
<title>Dan TV</title>
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function currentProgram(context) {
var title = '';
$.getJSON(context.$data.uriCurrent, function(current) {
if (current.series != null) {
title = current.series.serieTitle
if (current.series.episode.episodeTitle != null) {
title = title + '<br>' + current.series.episode.seasonNumber + ':' + current.series.episode.episodeNumber + ' ' + current.series.episode.episodeTitle;
}
} else if (current.program != null) {
title = current.program.title;
} else if (current.film != null) {
title = current.film.title;
}
})
return title;
}
$(document).bind('mobileinit', function() {
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js">
</script>
<script>
$(document).ready(function() {
var viewModel = {
channels: ko.observableArray()
};
ko.applyBindings(viewModel);
$.ajaxSetup({
async: false
});
$.getJSON("http://beta.tvlive.io/channels/provider/FREEVIEW", function(data) {
viewModel.channels(data);
})
});
setInterval(function() {
console.log("refresh program");
}, 3000);
</script>
</head>
<body>
<div id="channelList" data-role=page>
<ul id="channels" data-filter="true" data-role="listview" data-inset="true" data-bind="foreach: channels">
<li>
<img src="#" data-bind="attr: {src:image, alt: name}"> <font size="1" id="channelTitle" data-bind="text:name"></font>
<h2 class="text" data-bind="html: currentProgram($context)"></h2>
</li>
</ul>
</div>
<script type="text/javascript" src="js/xbmc.launcher.js?v=2.1.0"></script>
</body>
</html>
如您所见，频道的数据馈送不会改变，但是节目列表需要每分钟更新一次。从理论上讲，这应该很简单。需要更新setinterval函数，以便它在每个通道的上下文中运行当前程序，以便更新当前程序。
最佳答案
我将对您的代码进行一些重组：
1）将updateChannels方法添加到viewModel并调用超时功能。
var viewModel = {
channels: ko.observableArray(),
updateChannels: function() {
for (var i = 0, len = this.channels().length; i < len; i++) {
this.channels()[i].update();
};
}
};
setInterval(function() {
viewModel.updateChannels();
}, 3000);
2）创建单个
channel对象，并向每个对象添加update方法以及title属性（在第一次json调用时）： $.getJSON("http://beta.tvlive.io/channels/provider/FREEVIEW", function(data) {
var channels = [],
channelsFromJSON = JSON.parse(data),
channelFromJSON,
channel;
for (var i = 0, len = channelsFromJSON.length; i < len; i++) {
channelFromJSON = channelsFromJSON[i];
channel = {
uriCurrent: channelFromJSON.uriCurrent,
title: ko.observable(),
src: channelFromJSON.src,
name: channelFromJSON.name
}
channel.update = function() {
$.getJSON(channel.uriCurrent, function(channelData) {
var channelObject = JSON.parse(channelData), // I assume you get JSON from server
title = 'no title';
if (channelObject.series != null) {
title = channelObject.series.serieTitle;
if (channelObject.series.episode.episodeTitle != null) {
title = title + '<br>' + channelObject.series.episode.seasonNumber + ':' + channelObject.series.episode.episodeNumber + ' ' + channelObject.series.episode.episodeTitle;
}
} else if (channelObject.program != null) {
title = channelObject.program.title;
} else if (channelObject.film != null) {
title = channelObject.film.title;
}
channel.title( title );
})
}
channels.push( channel );
};
viewModel.channels(channels);
})
3）和html：
<ul id="channels" data-filter="true" data-role="listview" data-inset="true" data-bind="foreach: channels">
<li>
<img src="#" data-bind="attr: {src:image, alt: name}"> <font size="1" data-bind="text:name"></font>
<h2 class="text" data-bind="html: title"></h2>
</li>
</ul>
关于javascript - knockout 移动JS刷新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34621243/