javascript - 使用淘汰赛js在点击选项上上下移动数组值?
问题描述
我是 knockoutjs 的新手,我看到了一个示例,它通过在选项中选择索引的下拉值来上下移动数组值。但它的问题是他们没有正确移动这些值。并且在更改选择框中的数组位置选项后将更改..
var viewModel = function() {
var self = this;
var Item = function(name, pos) {
this.name = ko.observable(name);
this.position = ko.observable(pos);
var oldPosition = pos;
this.position.subscribe(function(newValue) {
self.reposition(this, oldPosition, newValue);
oldPosition = newValue;
}, this);
};
this.items = [
new Item("item Three", "3"),
new Item("item One", "1"),
new Item("item Two", "2"),
new Item("item Five", "5"),
new Item("item Four", "4"),
new Item("item Six", "6")
];
self.orderedItems = ko.computed(function() {
return ko.utils.arrayFilter(this.items, function(item) {
return true;
}).sort(function(a, b) {
return a.position() - b.position();
});
});
self.curName = ko.observable();
self.reposition = function(item, oldPosition, newPosition) {
console.debug("Reposition", item, oldPosition, newPosition);
};
};
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class='liveExample'>
<ul data-bind="foreach: orderedItems">
<li>
<div> <span data-bind="text: name"> </span> has Position:
<select id="pos" data-bind=" options: orderedItems,
optionsText: 'position',
optionsValue: 'position',
value: position "></select>
</div>
</li>
</ul>
</div>
这是我的示例代码,我想显示数组索引位置应该显示在下拉列表中。我想在下拉列表中选择索引值,数组值的位置应该改变,而不是选项。淘汰赛js怎么可能。
解决方案
所以这个比正常的要复杂一些,因为你的索引是基于 Item 的一个属性的。这没有错,它只是增加了更多的复杂性。
首先,您必须创建“索引”数组,因为您实际上并没有更改项目的索引,它们只是根据位置属性计算出来的。
this.items()
已更改为 observableArray 以将项目的更改传播/冒泡到其他函数。现在您可以包含一个“添加项目”功能,将其添加到项目数组中,一切都会正确更新。
我在 Item 构造函数中删除了 subscribe 函数,它在不需要的时候导致了太多的问题。相反,我将一个事件处理程序附加到可以管理项目的选择框,并通过获取 value() 删除了值的双向绑定。
希望这会有所帮助,祝你好运!
var viewModel = function() {
var self = this;
// UPDATED: Removed the subscribe function
var Item = function(name, pos) {
this.name = ko.observable(name);
this.position = ko.observable(pos);
};
// UPDATED: Changed to observable so you can change items here and it will propogate down to the computed functions
this.items = ko.observable([
new Item("item Three", "3"),
new Item("item One", "1"),
new Item("item Two", "2"),
new Item("item Five", "5"),
new Item("item Four", "4"),
new Item("item Six", "6")
]);
// ADDED: Create array of index options based on length
this.positions = ko.computed(function(){
var numArray = [];
for(i = 0; i < self.items().length; i++) {
numArray.push(i + 1)
}
return numArray;
})
self.orderedItems = ko.computed(function() {
return ko.utils.arrayFilter(self.items(), function(item) {
return true;
}).sort(function(a, b) {
return a.position() - b.position();
});
});
self.curName = ko.observable();
/**
* UPDATED: Get item at selected position, change it to the current
* items position, then update current items position to the selected position;
*/
self.reposition = function(item, event) {
var selectedPosition = event.target.value;
var itemAtPosition = ko.utils.arrayFirst(self.items(), function(i){
return i.position() === selectedPosition;
})
itemAtPosition.position(item.position());
item.position(event.target.value)
};
};
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class='liveExample'>
<ul data-bind="foreach: orderedItems">
<li>
<div> <span data-bind="text: name"> </span> has Position:
<select id="pos" data-bind=" options: positions(),
value: position(), event: { change: reposition} "></select>
</div>
</li>
</ul>
</div>
推荐阅读
- javascript - 如何在不停止的情况下运行 img 滑块?
- uwp - UI 使用旧组件的值
- python - 在 Keras 中,使用 validation_split (在“fit”方法中)和 model.evaluate 函数之间最好的是什么?
- sql - Laravel Eloquent,按周分组并显示一周的开始和结束
- robotframework - 只需执行命令以根据测试用例名称保存日志报告
- reactjs - 反应如何滚动到特定位置
- pandas - pandas: df.loc[-1,col] 有时可以工作,有时会用 NAN 添加额外的行
- javascript - 材质 UI 样式不适用
- javascript - ES2020 nullish 合并运算符 (??) 可以用来检查未声明的变量吗?
- react-native - Firebase crashlytics 中的非致命错误能否在不杀死应用程序 React Native 的情况下记录错误