Knockout.js Pre-seed ObservableArray

我不知道如果我想在這裏做太多，但這裏是場景。我有一個asp.net mvc頁面，第一次加載時，使用mvc框架中的標準foreach機制在視圖中返回一個數據表。如果用戶啓用了javascript，我想用knockout來更新表格。有沒有辦法讓knockout從dom表讀取數據並將該數據用作最初的可觀察集合。從那時起，我將使用knockout和ajax來添加，編輯或刪除數據。Knockout.js Pre-seed ObservableArray

簡而言之，我需要將一個html表格解析爲一個可供挖掘的observable集合。

來源

2013-01-11 David Derman

您可以在JavaScript變量中設置的初始數據，然後添加到可觀察到的，而不是在服務器中使用的foreach。 – MuriloKunze

在做這件事時你面臨的問題是什麼？它是完全地可能， – paritosh

@MuriloKunze：他說的JavaScript可能會被禁用。如果JavaScript被禁用，他不能使用JavaScript變量。 –

我在編寫此起來了個去：

下面是基本標記：

<table id="table" data-bind="template: { name: 'table-template' }"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Surname</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Richard</td> 
     <td>Willis</td> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td>Smith</td> 
    </tr> 
    </tbody> 
</table> 

<!-- Here is the template we'll use for re-building the table --> 

<script type="text/html" id="table-template"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Surname</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: data"> 
    <tr> 
     <td data-bind="text: name"></td> 
     <td data-bind="text: surname"></td> 
    </tr> 
    </tbody> 
</script>

的Javascript：http://knockoutjs.com/documentation/plugins-mapping.html

：

(function() { 

    function getTableData() { 
    // http://johndyer.name/html-table-to-json/ 

    var table = document.getElementById('table'); 
    var data = []; 
    var headers = []; 

    for (var i = 0; i < table.rows[0].cells.length; i++) {  
     headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, ''); 
    } 
    // go through cells 
    for (var i = 1; i < table.rows.length; i++) { 
     var tableRow = table.rows[i]; 
     var rowData = {}; 
     for (var j = 0; j < tableRow.cells.length; j++) { 
     rowData[headers[j]] = tableRow.cells[j].innerHTML; 
     } 
     data.push(rowData); 
    } 

    return data;   
    } 

    var Vm = function() { 
    this.data = ko.observableArray(getTableData());  
    }; 

    ko.applyBindings(new Vm(), document.getElementById('table')); 
})();

您可以使用映射插件創建每一行觀測這個概念延伸

在這裏查看演示：http://jsfiddle.net/CShqK/1/

編輯：我不是說這是最好的方法，因爲遍歷一個大表來獲取數據可能代價高昂。我可能會在該頁面中的其他人所建議的頁面中輸出JSON。

來源

2013-01-11 17:00:22 badsyntax

花了幾天的時間搞這個東西，我開始認爲在同一個視圖中混合支持javascript和非javascript的瀏覽器只是一個壞主意。我還沒有在網上看到一個清晰完成的例子。這就是說，你的解決方案工作，並處理我關心的兩次下載相同的數據。我結束了使用克里斯弗萊徹的腳本，基本上做同樣的事情：http://www.fletchzone.com/post/jQuery-HTML-Table-to-JSON-Version-20!.aspx –

如何只餵養你的數據觀察到的陣列，而不是解析HTML表

myArray: ko.observableArray(@Html.Raw(Json.Encode(Model.myTableData)))

如果你真的需要去解析HTML的方式，你可以使用下面的代碼

var tableData = $('#myTable tr').map(function(){ 
return [ 
    $('td,th',this).map(function(){ 
     return $(this).text(); 
    }).get() 
]; 
}).get(); 
$(document).ready(function() { 
    var myData = JSON.stringify(tableData); 
    alert(myData) 
});

這裏是表示動作的代碼小提琴： http://jsfiddle.net/FWCXH/

來源

2013-01-11 14:56:03 yqit

這是行不通的;但是，它現在返回數據2次。一次作爲html和一次json。有誰知道如何解析HTML到JSON中？ –

我添加到我的答案一個JavaScript函數，將html錶轉換爲json – yqit

Knockout.js Pre-seed ObservableArray

回答

相關問題