Question

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

http://jsfiddle.net/CSFuF/1/与.reverse（）无法正常工作

<!-- 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>

JS：

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);

Answer 1

在可观察数组上调用reverse()会反转基础数组并且不会返回数组。所以绑定到它的返回值并没有呈现任何东西。

要插入可观察数组的开头，请使用unshift()。

您还使用$index来显示正在呈现的数组项的索引。但是因为你总是从头到尾遍历，所以它总是从0变为length - 1。

这是unshift()的样子。我添加了name属性并在其中插入了一个计数器，以便您可以看到数组中项目的顺序......

HTML

<!-- 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>

的JavaScript

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);

小提琴...... http://jsfiddle.net/CSFuF/2/

如何反转对KnockoutJS数组项的顺序，以便它们按降序添加到屏幕顶部

1 个答案: