2

我想在按下相应的按钮时来回旋转（转盘）数组。下面的代码正是这样做的。

现在我问自己这是应该做的正确方式。我的意思是我如何重新绑定旋转函数的结果。

使用 self.list(myNewArray) 我扔掉了以前的数组。这个对吗？

       $(function () {

            Array.prototype.rotateLeft = function () {

                var first = this.shift();
                this.push(first);
                return this;
            }
            Array.prototype.rotateRight = function () {
                var last = this.pop();
                this.unshift(last);
                return this;
            }

            var numbers = [1, 2, 3, 4, 5];

            function NumberViewModel(numbers) {
                var self = this;
                self.list = ko.observableArray(numbers);
                self.rotateLeft = function () {
                    self.list(self.list().rotateLeft());
                };
                self.rotateRight = function () {
                    self.list(self.list().rotateRight());
                };
            }
            var vm = new NumberViewModel(numbers);
            ko.applyBindings(vm);
        });

    </script>
</head>
<body>
    <button data-bind="click: rotateLeft">rotate left</button>
    <button data-bind="click: rotateRight">rotate right</button>
    <ul data-bind="template: { name: 'listTempl', foreach: list }">
    </ul>
    <script id="listTempl" type="text/html">
        <li style="float:left;list-style:none;padding-left:5px;font-size:30px;" data-bind="text: $data"></li>
    </script> 
</body>
</html>
4

1 回答 1

0

它很好，但并不完美。你最好这样做：

var numbers = [1, 2, 3, 4, 5];

function NumberViewModel(numbers) {
    var self = this;
    self.list = ko.observableArray(numbers);
    self.rotateLeft = function () {
        var item = self.list.shift();
        self.list.push(item);
    };
    self.rotateRight = function () {           
        var item = self.list.pop();
        self.list.unshift(item);
    };
}
var vm = new NumberViewModel(numbers);
ko.applyBindings(vm);

我们的代码之间的区别在于您修改了 observableArray 的内部数组并将其设置为结果。这会导致刷新整个 observableArray。

我认为直接修改 observableArray 会好很多。

见小提琴

于 2013-06-27T21:18:42.053 回答