淘汰赛中的元素绑定答案

【问题标题】：element bind in knockoutjs淘汰赛中的元素绑定
【发布时间】：2012-10-13 06:48:56
【问题描述】：

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

我想在不使用 jquery 的情况下执行上述操作。我发现我可以使用 knockoutjs 元素绑定 - data-bind="element: scrollbox"

但我不知道该怎么做

【问题讨论】：

是否要将属性scrollHeight 绑定到另一个元素中的值？
没有。当滚动高度增加时，我想进行 ajax 调用以获取更多内容
您确定要在 KO 中执行此操作吗？它更多的是用于数据绑定而不是事件处理。 $(window).scroll(...) 应该可以解决您的问题。

标签： knockout.js

【解决方案1】：

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

This question 处理window.scroll(...) 函数并进行ajax 调用。

【讨论】：

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

【讨论】：

【解决方案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: {}

【讨论】：