1

複数選択リスト、入力テキスト ボックス、および追加ボタンを作成しました。ユーザーは、入力ボックスと追加ボタンを使用して、複数選択リストに新しいオプションを挿入できます。フィドルの例も作成しました：

http://jsbin.com/exuwis/7/edit

例ではノックアウト js を使用しました。選択リストは "size="5" で定義されています。リストに 5 つ以上のエントリを取得した後、手動で一番下までスクロールしないと新しいエントリが表示されません。ユーザーがリストに新しいエントリを入力すると、スクロール バーが自動的にリストの一番下に移動するようにするにはどうすればよいですか?

4

2 に答える 2

2

bindingHandler を追加します。

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

于 2013-05-12T11:25:37.500 に答える
0

他のオプションの上に新しいオプションを追加することを検討してください。

コンテンツを自動スクロールすることはお勧めできません。

使用する

self.CourseOptions.unshift(self.OptionToAdd());

それ以外の

self.CourseOptions.push(self.OptionToAdd());

配列の先頭に項目を挿入します。

于 2012-10-31T08:35:33.373 に答える