加載/更新新數據到網頁並使用Knockout動態更新UI

使用動態JavaScript技術Knockout，我想向我的網頁發送新數據並要求Knockout爲我執行動態UI更新。加載/更新新數據到網頁並使用Knockout動態更新UI

以下示例顯示了一個顯示兩個分數（P1和P2）的非常簡單的網頁。 JavaScript使用Knockout創建一個ViewModel（）。不幸的是，我只通過提供JSON數據屬性來實現這一點。我不知道如何動態加載並動態更新新的樂譜數據。

現在我的問題：我怎樣才能向我的網頁「注入」（即首先加載並隨時更新）新數據，而Knockout會動態更新Scores UI？

我想，我需要某種...

一）$ .getJSON（」 ......初裝料！

二）請求後（REST）調用從對於數據更新的任何地方

但我怎麼有這方面的幫助，做）和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>

來源

2017-06-03 iKK

你的意思是這樣的嗎？這裏是一個可運行的小提琴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); 
     } 
    }); 
    } 
}

來源

2017-06-04 00:55:40

的:)我不想通過一個按鈕，從網頁的用戶界面 - 內使數據的更新，而是，我想通過另一個應用程序動態更新視圖模型，數據類型（即最有可能帶有POST請求）。我會怎麼做？ – iKK

你是否在尋找一個推出通知，淘汰賽將回應？ –

是的，我認爲這很接近。我想要實現的目標是讓幾個客戶端查看他們的瀏覽器，他們看到的是他們的UI內容的自動更新。 UI更改應由應用程序通過某種REST發佈到網頁的主機服務器（或者您通過某種推送通知提及）來啓動。你會怎麼做？ – iKK

加載/更新新數據到網頁並使用Knockout動態更新UI

回答

相關問題