尝试通过自定义绑定为 TR 做彩色动画 [英] Trying to do color animation for TR by custom binding
本文介绍了尝试通过自定义绑定为 TR 做彩色动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试通过自定义绑定为 TR 制作彩色动画，但事情没有按预期工作.我犯了一些错误，因为我是 KnockoutJS 的新手.所以请告诉我我需要在代码中修复哪个区域.
I am trying to do color animation for TR by custom binding but things are not working as expected. I made some mistake because I am new in KnockoutJS. So please tell me in which area I need to fix in my code.
错误在这里 AnimateRow : $parent.Hasfade() 我有一个名为 Hasfade 的属性，我用 false 初始化它，但是当行被插入或更新时，我设置为 true.
The mistake is here AnimateRow : $parent.Hasfade() I have a property called Hasfade which I initialize with false but when rows get inserted or updated then I set true.
ko.bindingHandlers.AnimateRow = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
alert(value);
$(element).animate({ backgroundColor: "#FCFCD8" }, 300).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 500);
}
}
该值越来越空，但它假设为真，因为我在可观察数组中插入和更新数据时设置.请指导我进行修复.
The value is getting null but it suppose to has true because I set at the time of insert and update data in observable array. Please guide me to a fix.
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
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;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td
{
background: #dcddc0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
tr.mutating td
{
background-color: #efe;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-3.3.0.js" type="text/javascript"></script>
<script src="Scripts/knockout.mapping.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
ko.bindingHandlers.AnimateRow = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
alert(value);
$(element).animate({ backgroundColor: "#FCFCD8" }, 300).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 500);
}
}
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);
self.mutating = ko.observable(false);
};
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.Hasfade = ko.observableArray(false);
self.Stocks = ko.observableArray(data);
self.AddNewData = function () {
self.Stocks.push.apply(self.Stocks, NewData);
NewData.forEach(markMutated);
};
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);
};
function markMutated(item) {
item.Hasfade(true);
setTimeout(function () {
item.Hasfade(false);
}, 800);
}
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);
markMutated(matchedItem);
}
};
self.UpdateData = function (dataContext) {
var itemToEdit = dataContext;
itemToEdit.status("Out of Stock");
markMutated(itemToEdit);
};
};
var vm = new appViewModel();
ko.applyBindings(vm);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<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 data-bind="attr: { id: 'tr_' + $index() } , AnimateRow : $parent.Hasfade()">
<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>
</form>
</body>
谢谢
推荐答案
- 您将
Hasfade变成了observableArray而不是observable. item没有Hasfade.它是 appModel 的一个属性.- 除了打开它之外，您不会对
Hasfade做任何事情. - 绑定处理程序只会在行更新时触发；更新其各个部分不会导致处理程序触发
- You made
HasfadeanobservableArrayinstead of anobservable. itemdoesn't haveHasfade. It is a property of the appModel.- You don't do anything with
Hasfadeexcept unwrap it. - The binding handler will only fire when the row is updated; updating its individual parts will not cause the handler to fire
处理程序在行创建时触发，但没有动画可见.表格行不支持动画.
The handler is firing at row-create time, but no animation is visible. Animations are not supported on table rows.
这篇关于尝试通过自定义绑定为 TR 做彩色动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
