Question

我正在学习淘汰赛。所以我想从淘汰教程网站http://knockoutjs.com/documentation/foreach-binding.html学习。尝试在我的最后运行他们的代码。

我只是尝试开发一些东西，当我将在可观察数组中添加一些东西然后在页面中添加一个新的淡入效果，当元素将从数组中删除时，div将从具有淡出效果的页面消失。我试过的代码没有按预期工作。所以我请求所有人请查看我的代码并告诉我在哪里犯了错误导致错误。

这是我的完整代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #dash
        {
            /*max-height: 128px;*/
            overflow: hidden;
        }
        #dash div
        {
            border: 1px solid #de2345;
            padding: 4px;
            margin: 2px;
            line-height: 20px;
            box-sizing: border-box;
        }
        #dash div:before
        {
            content: '--> ';
        }
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <button id="button" data-bind="click: addRow" type="button">click</button>
    <div id="dash" data-bind="foreach: {data : rows, beforeRemove : ElementFadeOut, afterAdd:ElementFadeIn}">
        <div data-bind="text:$data">
        </div>
    </div>

    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            function TableModel() {
                var self = this;
                self.Counter = 1;
                self.rows = ko.observableArray([]),
                self.addRow = function () {
                    self.rows.push(self.Counter + ' ' + new Date());
                    self.Counter++;
                    setTimeout(function () {
                        self.rows.shift();
                        self.Counter--;
                    }, self.rows().length * 1000);
                },

                self.ElementFadeOut = function (element, index, data) {
                    $(element).delay(1000).fadeOut();
                }

                self.ElementFadeIn = function (element, index, data) {
                    alert('pop');
                    $(element).delay(1000).fadeIn()
                }

            }
            ko.applyBindings(new TableModel());
        });
    </script>

</body>
</html>

JSFiddle链接 http://jsfiddle.net/gLfmztqj/

在代码中可能存在一些错误，即数据没有正确地从setTimeout功能中删除，并且在将元素添加到数组中时，在添加少量数据之后数据也不会添加。这段代码有什么问题。请检查jsfiddle中的代码并告诉我。感谢

我只是根据 @Rohith Nair 建议更新源代码，现在它正在运行。

Answer 1

前几天我想要这样做，所以html看起来像这样：

<div class="list-group" data-bind="foreach: { data: list, afterAdd: animateAdd, beforeRemove: animateRemove }">
                                                // markup here
                                            </div>

js函数将如下所示：

self.animateAdd = function(element) {
                    if (element.nodeType === 1) {
                        var animation = 'Animation Type Here';                            $(element).addClass(animation).delay(1000).queue(function (next) {
                            $(element).removeClass(animation);
                            next();
                        });
                    }
                };

                self.animateRemove = function(element) {
                    if (element.nodeType === 1) {
                        var animation = 'Animation Type Here';                              $(element).addClass(animation).delay(500).queue(function (next) {
                            $(element).remove();
                            next();
                        });
                    }
                };

Knockoutjs：在knockoutjs添加/删除时想要Fadein / FadeOut元素

这是我的完整代码

1 个答案: