knockout.js - 淘汰赛中的元素绑定

Question

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

我想做类似上面的事情，而不使用 jquery。我发现我可以使用 knockoutjs 元素绑定 -data-bind="element: scrollbox"

但我不知道该怎么做

Answer 1

我会说，从阅读您的评论来看，KnockOutJS 并不是您处理滚动时 ajax 的最佳人选。

这个问题处理window.scroll(...)函数并进行ajax调用。

Answer 2

添加自定义绑定

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: {}

Answer 3

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将一直保留undefined到ko.applyBindings执行之后。因此，您实际上应该仅在绑定视图模型后作为函数执行的 click 或其他事件绑定中使用它。