knockout.js - 要素はknockoutjsにバインドします

Question

var scrollheight=$('#scrollbox').attr('scrollHeight'); 

jqueryを使用せずに、上記のようなことをしたいと思います。私はknockoutjs要素bindを使用できることに気づきました-data-bind="element: scrollbox"

しかし、私はそれを行う方法がわかりません

Answer 1

あなたのコメントを読むと、あなたの場合、KnockOutJS はスクロール時に ajax を処理するための最良の候補ではないと思います。

この質問window.scroll(...)は関数を処理し、ajax呼び出しを行います。

Answer 2

Afaik、ko には独自の組み込み要素バインディングがありません。いくつかのプロジェクトで使用するものを作成しました。次のようになります。

ko.bindingHandlers.element = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var name = ko.utils.unwrapObservable(valueAccessor());
        viewModel[name] = element;
    }
};

ただし、バインドするときは、viewmodel のプロパティ名を のように引用符で囲みますdata-bind="element: 'elementName'"。ビューモデルは次のようになります。

function MyViewModel() {
    var self = this;
    self.elementName = undefined;
    self.doSomething = function() {
        $(self.elementName).fadeOut();
    };
}

実行後までself.elementName残ることに注意してください。したがって、ビューモデルがバインドされた後に関数として実行されるクリックまたはその他のイベント バインディングでのみ、これを使用する必要があります。undefinedko.applyBindings

Answer 3

カスタム バインディングを追加する

ko.bindingHandlers.scrollTo = {
    init: function(element, valueAccessor) {
        jQuery(element).show().focus();
        if (jQuery(element).position() != null) {
          jQuery(window).scrollTop(jQuery(element).position().top);
        } 
    }    
};

HTMLで使用します：

data-bind="scrollTo: {}