Question

我正在尝试使用KnockoutJS和自定义绑定构建一些类似手风琴的功能

到目前为止，我已经到了中途：

<div data-bind="foreach: items">
    <div class="item"> <span data-bind="text: name() ? name() : 'New Thing'"></span>

        <br /> <a href="#" data-bind="click: $parent.toggleVisibility">Show / Hide</a>

        <div class="fullDetails" data-bind="accordion: visible">
            <label>Name:</label>
            <input type="text" data-bind="value: name" />
        </div>
    </div>
</div>
<a href="#" data-bind="click: addItem">Add new item</a>

和我的Javascript

var ViewModel = function () {
    var self = this;

    self.items = ko.observableArray([new ItemModel()]);

    self.addItem = function (item) {

        ko.utils.arrayForEach(self.items(), function (i) {
            i.visible(false);
        });
        self.items.push(new ItemModel())

    };

    self.toggleVisibility = function (item) {

        ko.utils.arrayForEach(self.items(), function (i) {
            i.visible(false);
        });

        item.visible(!item.visible())
    };
};

var ItemModel = function () {
    this.visible = ko.observable(true);
    this.name = ko.observable();
}

ko.bindingHandlers.accordion = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value));
    },

    update: function (element, valueAccessor) {
        var value = valueAccessor();

        ko.utils.unwrapObservable(value) ? $(element).slideDown() : $(element).slideUp();
    }
};

ko.applyBindings(new ViewModel());

同样在JSFiddle上： http://jsfiddle.net/alexjamesbrown/PPAsK/

我遇到的一些问题：

显示/隐藏链接
这似乎向上滚动，然后立即再次向下滚动。

添加新项目
我试图将项目显示为slideUp，然后将新项目显示为slideDown，但这不起作用 - 无论是什么项目是可见的slideUp，但新项目刚刚出现

Answer 1

问题1：

您始终在显示/隐藏链接点击时显示，因为该项目先前已重置为可见（false）。修正：

    ko.utils.arrayForEach(self.items(), function (i) {

        //don't bother with the item, we take care of it later
        if (item !== i) {
            i.visible(false);
        }

    });

问题2：

你需要从隐藏的添加项开始，然后应用self.toggleVisibility（newItem）这将隐藏其他人并为新的动画制作动画

self.addItem = function (item) {
        var newItem = new ItemModel();

        //make sure it starts hidden
        newItem.visible(false);
        self.items.push(newItem);

        //highlight it the usual way
        self.toggleVisibility(newItem);
    };

修正版本： http://jsfiddle.net/tudorilisoi/3LzbT/8/

KnockoutJS手风琴喜欢自定义绑定的行为

1 个答案: