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 に答える