Knockout Foreach綁定到html表格不起作用

-1

我一直在處理這個問題一段時間。我是Knockout的新手。Knockout Foreach綁定到html表格不起作用

我有一個表格，我想要使用Knockout顯示的HTML頁面。如果我硬編碼的JSON數組，它的工作原理！當我使用$ .getJSON函數時，它不起作用。

一點背景：我不能在這個項目中使用任何服務器端語言 - 正在使用的CMS將不允許服務器端的東西。

我從我下載的數據表中獲取JSON，然後將其傳遞給此自動顯示，樣式等，以便所有用戶必須執行的操作是使用html表上載文件，其餘部分是已搞定。

如果有更簡單的方法，我絕對樂於接受建議。我的問題是：我如何使foreach數據顯示？

這是我搗鼓一些測試數據： https://jsfiddle.net/xtw3nf8q/

HTML

<table>  
<tbody data-bind="foreach: teststuff">  
<tr> 
     <td data-bind="text: $data.testone"></td>    
     <td data-bind="text: $data.testtwo"></td> 
     <td data-bind="text: $data.testthree"></td> 
     <td data-bind="text: $data.testfour"></td> 
     <td data-bind="text: $data.testfive"></td> 
     <td data-bind="text: $data.testsix"></td> 
     <td data-bind="text: $data.testseven"></td> 
    </tr> 
</tbody>

的jQuery /淘汰賽

$.getJSON("/echo/json/jsonfile.txt", function(data) { 
ko.applyBindings({ 
teststuff: data 
}); 
});

這裏是jsonfile.txt內容：

[{"testone":"Number","testtwo":"49","testthree":"49","testfour":"49","testfive":"49","testsix":"49","testseven":""},{"testone":"Reporting","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"0.0 %"},{"testone":"Area","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":""},{"testone":"K. BACA","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"D. GRAY","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"J. ISA","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"Number","testtwo":"49","testthree":"49","testfour":"49","testfive":"49","testsix":"49","testseven":""},{"testone":"Reporting","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"0.0 %"},{"testone":"Area","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":""},{"testone":"T. BARK","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"H. LAND","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"F. JONES","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"},{"testone":"D. KNOWLES","testtwo":"0","testthree":"0","testfour":"0","testfive":"0","testsix":"0","testseven":"N/A"}]

我下載了KnockoutJS插件/ Chrome擴展程序，以幫助調試和這讓我這一點。開發者控制檯中現在沒有錯誤;當我console.log「數據」，它顯示我的數據。我很茫然！

來源

2017-01-25 malmalz

歡迎堆棧溢出！你的問題的全部內容必須在**你的問題中**，而不僅僅是鏈接。鏈接腐爛，使問題及其答案在未來的人們中毫無用處，人們不應該離開現場去幫助你。在**問題中放置一個[mcve] **，最好使用Stack Snippets（'<>'工具欄按鈕）使其可以運行（它們支持Knockout）。更多：[*我如何提出一個好問題？]（/ help/how-to-ask） –

我的問題的全部內容在這裏 - 是否需要包含我所有的代碼？ – malmalz

是的 - 這可能是內容中最重要的部分。請參閱上面的鏈接。 –

-1

您已向服務器詢問文字！它給你一個字符串

$.getJSON("/echo/json/jsonfile.txt", ....

您需要打開該字符串轉換成一個有效的對象（在這種情況下，數組）：

$.getJSON("/echo/json/jsonfile.txt", function(data) { 
    ko.applyBindings({ 
     teststuff: JSON.parse(data) 
    }); 
});

活生生的例子（使用字符串數據）：https://jsfiddle.net/xtw3nf8q/4/

來源

2017-01-25 17:15:14 Jamiec

現在我正在某處 - 我現在在控制檯中有一個錯誤！「SyntaxError：missing：after property id」現在看看它。我會讓你知道的！感謝您的答覆！！ – malmalz

@malmalz thats unrelated - 在你發佈的任何代碼中沒有屬性'id'。我把你的數據，它作爲一個字符串，並證明這是行之有效的 - https://jsfiddle.net/xtw3nf8q/4/ – Jamiec

是的，你是對的我做了一些愚蠢的事！ – malmalz

Knockout Foreach綁定到html表格不起作用

回答

相關問題