knockoutjs：如何觀察靜態html表？

Question

我有一個現有的行的HTML表。我想將所有行映射爲可觀察對象的可觀察數組，因此如果我更改了某行的輸入值，我的可觀察數組上的對象就知道這一點。

這是可能嗎？

Answer 1

我同意用戶3297291.但是你可以使用html表來加載observable數組。運行下面的代碼。或者您也可以通過填寫表格打擊添加和可觀察到的陣列這裏玩它https://jsfiddle.net/7zop2n9j/12/您可以添加新行到表更新

function tableRow(material, quantity, unitPrice) { 
 
    var self = this; 
 
    this.material = ko.observable(material); 
 
    this.quantity = ko.observable(quantity); 
 
    this.unitPrice = ko.observable(unitPrice); 
 
} 
 

 
function model() { 
 
    var self = this; 
 
    this.material = ko.observable(''); 
 
    this.quantity = ko.observable(''); 
 
    this.unitPrice = ko.observable(''); 
 
    this.tableRows = ko.observableArray(''); 
 
    this.addRow = function() { 
 
    myViewModel.tableRows.push(new tableRow(
 
     self.material(), 
 
     self.quantity(), 
 
     self.unitPrice())); 
 
    } 
 
} 
 

 
var myViewModel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(myViewModel); 
 
    $('#baseTable tbody tr').map(function(i, row) { 
 
    myViewModel.tableRows.push(new tableRow(
 
     row.cells[0].textContent, 
 
     row.cells[1].textContent, 
 
     row.cells[2].textContent)); 
 
    }); 
 
});

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> 
 
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<table id="baseTable" style="display: none;"> 
 
    <thead> 
 
    <tr> 
 
     <th>Material</th> 
 
     <th>Quantity</th> 
 
     <th>Unit price</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Acrylic (Transparent)</td> 
 
     <td>25</td> 
 
     <td>2.90</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Plywood (Birch)</td> 
 
     <td>50</td> 
 
     <td>1.25</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Laminate (Gold on Blue)</td> 
 
     <td>50</td> 
 
     <td>1.25</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
 
    <thead> 
 
    <tr> 
 
     <th class="mdl-data-table__cell--non-numeric">Material</th> 
 
     <th>Quantity</th> 
 
     <th>Unit price</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: tableRows"> 
 
    <tr> 
 
     <td class="mdl-data-table__cell--non-numeric" data-bind="text: material"></td> 
 
     <td data-bind="text: quantity"></td> 
 
     <td data-bind="text: unitPrice"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p> 
 
    <div class="mdl-textfield mdl-js-textfield"> 
 
    <input class="mdl-textfield__input" type="text" id="material" data-bind="value: material"> 
 
    <label class="mdl-textfield__label" for="material">Material...</label> 
 
    </div> 
 
</p> 
 

 
<p> 
 
    <div class="mdl-textfield mdl-js-textfield"> 
 
    <input class="mdl-textfield__input" type="text" id="quantity" data-bind="value: quantity"> 
 
    <label class="mdl-textfield__label" for="quantity">Quantity...</label> 
 
    </div> 
 
</p> 
 
<p> 
 
    <div class="mdl-textfield mdl-js-textfield"> 
 
    <input class="mdl-textfield__input" type="text" id="unitPrice" data-bind="value: unitPrice"> 
 
    <label class="mdl-textfield__label" for="unitPrice">unitPrice...</label> 
 
    </div> 
 
</p> 
 

 
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" data-bind="click:addRow"> 
 
    <i class="material-icons">add</i> 
 
</button>