Question

我正在尝试创建一个用于监控系统活动的Web应用程序，我正在使用Flask作为我的CMS。更具体地说，我试图让系统信息定期更新而不刷新页面。现在，我通过检索百分比的本地信息来测试Web应用程序。

我创建了一个名为＆＃34; / refresh＆＃34;的路由，并以JSON格式添加了本地信息：

@app.route('/refresh')
    def refreshData():
        systemInfo = {'cpuload': si.getCPU(), 'memload': si.getMEM(), 'diskload': si.getDiskSpace()}
        return jsonify(systemInfo)

数据如下所示：

{
  "cpuload": 4.3, 
  "diskload": 0.7, 
  "memload": 27.8
}

截至目前，我正在使用Flask的变量来显示模板中的信息，但我希望在HTML中的脚本中访问JSON数据并将其设置为HTML元素并且每次更新很经常。我尝试使用淘汰赛，但我也无法使用淘汰赛。我的模板如下所示：

<ul id='sysInfo'>
    <li>Hostname: {{ sysInfo[0] }}</li>
    <li>CPU Core Count: {{ sysInfo[1] }}</li>
    <script type='text/javascript' src="http://code.jquery.com/jquery.min.js"></script>
    <script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.1.0.js">
        function update() {
            $.getJSON('/refresh', function(data) {
                $('#cpu').html(data[cpuload]);
                window.setTimeout(update, 5000);
            });
        }
    </script>
    <li>
        <div id="progress">
            <span id="percent">CPU usage: <div id="cpu"></div>%</span>
            <div style ='height: 20px; background-color: green; width: {{ cpuLoad }}%;'></div>
        </div>
        </li>

我知道HTML中的脚本并没有多大意义，但基本上我只是想使用getJSON（或其他最好的）来获取数据，并将这些数据放入我的HTML中。 / p>

Answer 1

更新

看看这个jsfiddle我做了那个演示它。只需在需要时用您的数据轮询替换按钮单击：

Full Bore，评论：http://jsfiddle.net/FgbKd/15/

Bare Bones，Just Works：http://jsfiddle.net/FgbKd/1/

我完成了更新我的jsfiddle以使其更清晰和详细。

END UPDATE

Knockout实际上是完美的，但是对于第一个获取视图模型的第一个计时器 - 然后使用新数据刷新它可能会有些混乱。

function myViewModel (data) {
    data = data || {}; var self = this;
    self = ko.mapping.fromJS(data);
  return self;
}

这是一个自我定义的视图模型。这就是淘汰映射的作用 - 获取json并从中创建视图模型。否则你必须建立自己的。

现在你需要创建一个对象，并用数据填充它。你这样做是这样的：

var myServerData;
$(document).ready(function(){
    myServerData = new myViewModel(data_json_received);    //
    ko.applyBindings(MyObject);     //myServerDataapplies the bindings found in HTML
});

有。您刚刚创建了myServerData，它是映射到您的viewmodel的挖空对象。这是有趣的东西，你玩的实际玩具，可以这么说。 MyObject.cpuload将在这里有一个值。

现在，如果你需要刷新你的myServerData，因为你做了另一个AJAX调用，并且需要你的viewmodel对象来反映新数据，你只需：

ko.mapping.fromJS(new_json_data, {}, myServerData);

喜欢，也许：

$.ajax({ 
  ....
  success : function(data){
     ko.mapping.fromJS(data, {}, myServerData);   //refreshes it
  }
});

宾果，做完了。您的MyServerData中包含新的json，页面上的任何HTML都会立即反映出来，例如：

<SPAN data-bind="text: cpuload"></SPAN>
<SPAN data-bind="text: diskload"></SPAN>
<SPAN data-bind="text: memload"></SPAN>

所以，加载knockout，knockout映射JS文件，使用我向你展示的viewmodel，然后使用mapping.fromJS行在你获得新数据时随时更新你的viewmodel。

如何在不刷新页面的情况下定期更新数据？

1 个答案: