我创建了一个多选列表、输入文本框和一个添加按钮。用户可以通过输入框和添加按钮在多选列表中插入新选项。我还创建了一个示例小提琴:
http://jsbin.com/exuwis/7/edit
我在示例中使用了 knockout.js。选择列表定义为“size="5"。在列表中获得超过 5 个条目后,如果不手动滚动到底部,我将看不到任何新条目。我希望当用户在列表中输入任何新条目时,滚动条会自动移动到列表底部。我该怎么做?
我创建了一个多选列表、输入文本框和一个添加按钮。用户可以通过输入框和添加按钮在多选列表中插入新选项。我还创建了一个示例小提琴:
http://jsbin.com/exuwis/7/edit
我在示例中使用了 knockout.js。选择列表定义为“size="5"。在列表中获得超过 5 个条目后,如果不手动滚动到底部,我将看不到任何新条目。我希望当用户在列表中输入任何新条目时,滚动条会自动移动到列表底部。我该怎么做?
添加绑定处理程序:
ko.bindingHandlers.scrollDown = {
update: function (elem, valueAccessor) {
var shouldBeSelected = ko.utils.unwrapObservable(valueAccessor());
if (shouldBeSelected) {
//scroll
$(elem).scrollTop(val);
// back to previous state
var boundProperty = valueAccessor();
if (ko.isWriteableObservable(boundProperty))
boundProperty(false);
}
}};
将数据绑定添加到滚动元素:
select data-bind="scrollDown: scrollDown ...
添加到 MainModel:
self.scrollDown = ko.observable(false);
self.CourseOptions.subscribe(function(){
setTimeout(function () {
self.scrollDown(true);
}, 0);
});
示例:http: //jsbin.com/exuwis/14/edit
考虑在其他选项之上添加新选项。
自动滚动内容不是一个好习惯。
采用
self.CourseOptions.unshift(self.OptionToAdd());
代替
self.CourseOptions.push(self.OptionToAdd());
在数组的乞求处插入项目。