javascript - Knockout mobile js refresh -
i have following code.
<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> as can see channels datafeed doesn't change program listing needs updated every minute. ideally , in theory should quite simple. setinterval funtion needs updated runs current program context of each of channels current program gets updated.
i restructure code little:
1) add updatechannels method viewmodel , call in timeout function.
var viewmodel = { channels: ko.observablearray(), updatechannels: function() { (var = 0, len = this.channels().length; < len; i++) { this.channels()[i].update(); }; } }; setinterval(function() { viewmodel.updatechannels(); }, 3000); 2) create individual channel objects , add update method each of them along title property (at first json call):
$.getjson("http://beta.tvlive.io/channels/provider/freeview", function(data) { var channels = [], channelsfromjson = json.parse(data), channelfromjson, channel; (var = 0, len = channelsfromjson.length; < 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), // assume json 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>
Comments
Post a Comment