Javascript 如何颠倒KnockoutJS数组项的顺序，以便它们以降序添加到屏幕顶部

需要将新项添加到可观察数组中，但要将它们添加到列表的顶部，而不是本例中的底部。有什么想法吗？已经尝试了.reverse（），但显然动态创建和显示数组时存在问题

with.reverse（）不起作用

不带。反向（）

在可观察数组上调用

reverse（）

，将反转在位的基础数组，而不返回该数组。因此绑定到它的返回值并没有呈现任何内容

要插入可观察数组的开头，请使用

unshift（）

您还可以使用

$index

显示正在渲染的数组项的索引。但是因为您总是从开始到结束遍历，所以它总是从

0

到

length-1

以下是使用

unshift（）

时的效果。我添加了一个

name

属性，并在其中插入了一个计数器，以便您可以查看数组中项目的顺序

HTML

小提琴

<!-- End view/edit employees details -->
<ul data-bind="foreach: parents.reverse()">
     <h3 data-bind="visible: $index() == 0">Parents</h3>

    <!-- add / remove parent -->
    <li>          
        <fieldset>
            <h4 data-bind="text: $index()"></h4>
              <p style="float: left">
                <button data-bind='disable: !(children().length > 0), click: toggleChildren'><span data-bind="visible: toggle">-</span><span data-bind="visible: !toggle()">+</span>
                </button>
                <button data-bind='disable: !toggle(), click: addChild'>Add child (+)</button>
            </p>
            <!-- add remove child -->
            <!-- ko if: toggle -->
            <ul class="qtr" data-bind="foreach: children.reverse()">
                 <h4 data-bind="visible: $index() == 0">Children</h4>

                <li>
                    <fieldset>
                        <h4 data-bind="text: $index()"></h4>
                        <button data-bind='click: removeChild'>Remove child (-)</button>
                    </fieldset>
                </li>
            </ul>
            <!-- /ko -->
            <p style="float: right">
                <button data-bind='click: removeParent'>Remove parent (-)</button>
            </p>

        </fieldset>
    </li>
</ul>
<p style="float: right">
    <button data-bind='click: addParent'>Add parent (+)</button>
</p>

function Parent(children) {
    var self = this;
    //self.name = ko.observable(name);
    self.toggle = ko.observable(true);
    self.children = ko.observableArray(children);
    self.addChild = function () {
        self.children.push(new Child("", self));
    }
    self.removeParent = function (parent) {
        vm.removeParent(self);
    };
    self.removeChild = function (child) {
        self.children.remove(child);
    }
    self.toggleChildren = function () {
        self.toggle(!self.toggle());
    };
}

function Child(name, parent) {
    var self = this;
    self.parent = parent;
    self.removeChild = function () {
        self.parent.removeChild(self);
    };
}

function ParentChildViewModel() {
    var self = this;
    self.parents = ko.observableArray([]);
    self.addParent = function () {
        self.parents.push(new Parent());
    };
    self.removeParent = function (parent) {
        self.parents.remove(parent);
    }
};

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

<!-- End view/edit employees details -->
<ul data-bind="foreach: parents">
     <h3 data-bind="visible: $index == 0">Parents</h3>

    <!-- add / remove parent -->
    <li>          
        <fieldset>
            <h4 data-bind="text: name"></h4>
              <p style="float: left">
                <button data-bind='disable: !(children().length > 0), click: toggleChildren'><span data-bind="visible: toggle">-</span><span data-bind="visible: !toggle()">+</span>
                </button>
                <button data-bind='disable: !toggle(), click: addChild'>Add child (+)</button>
            </p>
            <!-- add remove child -->
            <!-- ko if: toggle -->
            <ul class="qtr" data-bind="foreach: children">
                 <h4 data-bind="visible: $index == 0">Children</h4>

                <li>
                    <fieldset>
                        <h4 data-bind="text: name"></h4>
                        <button data-bind='click: removeChild'>Remove child (-)</button>
                    </fieldset>
                </li>
            </ul>
            <!-- /ko -->
            <p style="float: right">
                <button data-bind='click: removeParent'>Remove parent (-)</button>
            </p>

        </fieldset>
    </li>
</ul>
<p style="float: right">
    <button data-bind='click: addParent'>Add parent (+)</button>
</p>

function Parent(name, children) {
    var self = this;
    self.name = name;
    var childCount = 0;
    //self.name = ko.observable(name);
    self.toggle = ko.observable(true);
    self.children = ko.observableArray(children);
    self.addChild = function () {
        self.children.unshift(new Child(++childCount, self));
    }
    self.removeParent = function (parent) {
        vm.removeParent(self);
    };
    self.removeChild = function (child) {
        self.children.remove(child);
    }
    self.toggleChildren = function () {
        self.toggle(!self.toggle());
    };
}

function Child(name, parent) {
    var self = this;
    self.parent = parent;
    self.name = name;
    self.removeChild = function () {
        self.parent.removeChild(self);
    };
}

function ParentChildViewModel() {
    var self = this;
    var parentCount = 0;
    self.parents = ko.observableArray([]);
    self.addParent = function () {
        self.parents.unshift(new Parent(++parentCount));
    };
    self.removeParent = function (parent) {
        self.parents.remove(parent);
    }
};

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