我想按下相应的按钮来回旋转(转盘)阵列。以下代码完全正确。
现在我问自己这是应该做的正确方法。我的意思是我如何从旋转函数重新绑定结果。
使用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>
答案 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要好得多。