本文介绍了尝试通过自定义绑定为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);

        }
    }

该值正在为null,但它假定为true,因为我在插入和更新可观察数组中的数据时进行了设置.请指导我解决.

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>

谢谢

推荐答案

  1. 您将Hasfade设置为observableArray,而不是observable.
  2. item没有Hasfade.它是appModel的属性.
  3. 除了打开Hasfade之外,您什么都不做.
  4. 绑定处理程序仅在更新行时才会触发;更新其各个部分不会导致处理程序触发
  1. You made Hasfade an observableArray instead of an observable.
  2. item doesn't have Hasfade. It is a property of the appModel.
  3. You don't do anything with Hasfade except unwrap it.
  4. 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进行彩色动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 13:20