使用knockoutjs重新绑定旋转的数组

时间:2013-06-27 20:25:29

标签: knockout.js

我想按下相应的按钮来回旋转(转盘)阵列。以下代码完全正确。

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

使用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>

1 个答案:

答案 0 :(得分: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要好得多。

See fiddle