将新数据加载/更新到网页并使用 Knockout 动态更新 UI答案

【问题标题】：Loading/Updating new data to a webpage and using Knockout to dynamically update UI将新数据加载/更新到网页并使用 Knockout 动态更新 UI
【发布时间】：2017-11-05 01:48:26
【问题描述】：

使用名为 Knockout 的动态 JavaScript 技术，我想将新数据发送到我的网页并要求 Knockout 为我进行动态 UI 更新。

下面的示例显示了一个非常简单的网页，其中显示了两个分数（P1 和 P2）。 JavaScript 使用 Knockout 创建一个 ViewModel()。不幸的是，我只能通过提供 JSON-data 属性来实现这一点。而且我不知道如何动态加载和动态更新新的分数数据。

现在我的问题是：如何将新数据“注入”（即首先加载并随时更新）我的网页，而 Knockout 会动态更新分数 UI？

我想，我需要一些……

a) $.getJSON(".... 用于初始加载！

b) 来自任何地方的请求后 (REST) 调用以进行数据更新

但是我该怎么做 a) 和 b) ??? 感谢您对此的任何帮助。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iKK_ScoreMirror</title>
</head>

<script type='text/javascript' src='Knockout/knockout-3.4.2.js'></script>

<body>

<h3>Game</h3>

    <p>Score P1 =  <span data-bind="text: scoreP1"></span> </p>
    <p>Score P2 =  <span data-bind="text: scoreP2"></span> </p>

</body>

<script>

    function ViewModel() {
        var self = this;

        // !!!!!!! Here is the json-data given fix
        var jsonData = {
            sP1: 13,
            sP2: 23
        };

        self.scoreP1 = ko.observable(jsonData.sP1)
        self.scoreP2 = ko.observable(jsonData.sP2)
    };

    var vm = new ViewModel();
    ko.applyBindings(vm);

</script>

</html>

【问题讨论】：

标签： javascript json rest knockout.js

【解决方案1】：

你的意思是这样的吗？这是一个可运行的小提琴https://jsfiddle.net/ca0xv62w/2/

function ViewModel() {
  var self = this;
  self.scoreP1 = ko.observable('13')
  self.scoreP2 = ko.observable('23')
  self.loadDataFromServer = function() {
    $.ajax({
      type: 'POST',
      cache: false,
      data: {
        json: JSON.stringify(data)
      },
      url: '/echo/json/',
      success: function(response) {
       self.scoreP1(response.sP1);
       self.scoreP2(response.sP2);
      }
    });
  }
}

【讨论】：

Kind of :) 我不想通过网页 UI 中的按钮来更新数据 - 但相反，我想通过另一个应用程序动态更新 viewmodel-data（即很可能带有 POST 请求）。我该怎么做？
那么您是否正在寻找淘汰赛会响应的推送通知？
是的，我认为这很接近。我想要实现的只是让几个客户查看他们的浏览器，他们看到的是他们的 UI 内容的自动更新。 UI 更改应由应用程序通过某种形式的 REST-post 到网页的主机服务器（或者正如您提到的那样，通过某种形式的推送通知）发起。你会怎么做？
这里是使用微软的 web api 为您的休息服务的解决方案。 strathweb.com/2012/05/…
谢谢你，布莱恩 - 我会看看。