Question

我有以下代码。

<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函数，以便它使用每个通道的上下文运行当前程序，以便更新当前程序。

Answer 1

我会稍微改编你的代码：

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>

Answer 2

谢谢@NikolayErmakov。我做了一些修改，现在已经开始工作了。 channel.update方法似乎无法访问通道对象，因此我不得不将其作为参考传递。如果有更好的方法，请告诉我。如果有人对粗略和准备好的电视节目列表感兴趣，请在下面发布完整的代码。

<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>

    $(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(),
      updateChannels: function() {
        for (var i = 0, len = this.channels().length; i < len; i++) {
            this.channels()[i].update(this.channels()[i]);
         }; 
      }
     };

    setInterval(function() {
      viewModel.updateChannels();
      }, 30000);

    ko.applyBindings(viewModel);

    $.getJSON("http://beta.tvlive.io/channels/provider/FREEVIEW", function(data) {
      var channels = [],
          channelsFromJSON = data,
          channelFromJSON,
          channel;
      for (var i = 0, len = channelsFromJSON.length; i < len; i++) {
            channelFromJSON = channelsFromJSON[i];
            channel = {
                uriCurrent: channelFromJSON.uriCurrent,
                title: ko.observable('fetching...'),
                image: channelFromJSON.image,
                name: channelFromJSON.name
            }

            channel.update = function(channel) {
                $.getJSON(channel.uriCurrent+'?'+Date.now(), function(channelData) {
                                    var channelObject = channelData,
                    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);
      viewModel.updateChannels();
    }) 
   });

  </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:title"></h2>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/xbmc.launcher.js?v=2.1.0"></script>
</body>

</html>

淘汰移动js刷新

2 个答案: