css - 如何在按钮单击时捕获表行以添加 css 类 knockout js

Question

我有一个表，其中包含数据和由 knockout js foreach 绑定(bind)填充的数据。我想知道如何在更新时访问特定表行的数据。

如果我可以访问表行然后可以将 css 类添加到该 tr。我的目标是为一行制作位色动画，只需单击按钮即可更新。当任何数据将被推送到表行时单击“更新数据”按钮然后我想向该表行添加一个类并在几分钟后删除该类。因此我是新手，所以我没有想到要实现这一目标的逻辑......任何帮助将不胜感激。谢谢

jsfiddle http://jsfiddle.net/62Ls6x9n/157/

完整代码

<button data-bind="click: AddNewData">Add New Data</button>
<button data-bind="click: UpdateDataByIds">Update Data</button>
<br><br>
      <table class="imagetable">
      <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th> 
        <th>Status</th> 
        <th>Edit</th> 
        <th>Delete</th> 
      </tr>
      </thead>
      <tbody data-bind="foreach: Stocks">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td> 
            <td data-bind="text: price"></td> 
            <td data-bind="text: status"></td>
            <td><a href="#" data-bind="click: $parent.UpdateData">edit</a></td>
            <td><a href="#" data-bind="click: $parent.DeleteItem">delete</a></td>
        </tr>
      </tbody>
    </table>

table.imagetable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.imagetable th {
    background:#b5cfd2 url('cell-blue.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
table.imagetable td {
    background:#dcddc0 url('cell-grey.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}

var StockItem = function(_id, _name, _price, _status){
    var self = this;
    self.id = ko.observable(_id);
    self.name = ko.observable(_name);
    self.price = ko.observable(_price);
    self.status = ko.observable(_status);
};

var data= [ 
new StockItem("12345", "Acme Widget 1", "£25.99", "In Stock"), 
new StockItem("67890", "Acme Widget 2", "£28.99", "In Stock"),                                                               new StockItem("11123","Acme Widget 3","£15.99", "In Stock"), 
 new StockItem("14156", "Acme Widget 4", "£33.99", "In Stock")
];

var NewData = [new StockItem("99999", "HSL Limited", "£78.99", "In Stock")];

var appViewModel = function() 
{
    var self = this;
    self.Stocks = ko.observableArray(data);

    self.AddNewData = function(){
        self.Stocks.push.apply(self.Stocks,NewData);
    };

    self.DeleteItem = function(dataContext){
        var itemToDelete = dataContext;
        self.Stocks.remove(itemToDelete);
    }

    self.UpdateDataByIds = function(){
        var id1 = '11123';
        var id2 = '12345';
        self.UpdateById(id1,null,null,"Out of Stock");
        self.UpdateById(id2,null,"31.45",null);
    };

    self.UpdateById = function(_id, _name, _price, _status){
        var matchedItem = ko.utils.arrayFirst(self.Stocks(),          function(item) {
            return item.id() === _id;
        });

        if (matchedItem != null){
            if (_name != null) matchedItem.name(_name);
            if (_price != null) matchedItem.price(_price);
            if (_status != null) matchedItem.status(_status);
        }
    };

    self.UpdateData = function(dataContext){
        var itemToEdit = dataContext;
        itemToEdit.status("Out of Stock");
    };
};

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

Answer 1

您可以添加 Mutated数组到您的 View 模型:

self.Mutated = ko.observableArray();

更新/添加后，将元素 ID 添加到数组中:

self.Mutated.push(_id);

然后在您的 HTML 中，有一个 mutated每个类(class) <TR>那确实是变异的:

<tr data-bind="css: { mutated: $root.Mutated.indexOf(id()) > -1 }">

还有 CSS:

table.imagetable tr.mutated td { background-color: red; }

参见 Fiddle