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

I want to do something like above, without using jquery. I came across that I can use knockoutjs element bind - data-bind="element: scrollbox"

But I am not sure how to do it

nemesv
  • 138,284
  • 16
  • 416
  • 359
Supun Nakandala
  • 59
  • 1
  • 7
  • 1
    Are you wanting to bind the attribute `scrollHeight` to a value in another element? – Darbio Oct 13 '12 at 06:53
  • no. I want to make an ajax call to fetch more contents when the scroll height gets increased – Supun Nakandala Oct 13 '12 at 06:57
  • Are you sure you want to do this in KO? It's more for data-binding than event handling. `$(window).scroll(...)` should solve your problem. – Darbio Oct 13 '12 at 07:03

3 Answers3

1

I would say that, from reading your comments, KnockOutJS isn't the best candidate in your case for handling ajax on scrolling.

This question handles the window.scroll(...) function and makes an ajax call.

Community
  • 1
  • 1
Darbio
  • 11,286
  • 12
  • 60
  • 100
0

Afaik, ko does not have its own built-in element binding. I created one that I use in a couple of projects, looks like this:

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

However, when binding, I put the viewmodel property name in quotes, something like data-bind="element: 'elementName'". The viewmodel would then look like this:

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

Keep in mind that self.elementName will remain undefined until after ko.applyBindings executes. So you should really only use this in click or other event bindings that execute as functions after the viewmodel is bound.

danludwig
  • 46,965
  • 25
  • 159
  • 237
0

Add a custom binding

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

and use it in HTML: 

data-bind="scrollTo: {}
user341073
  • 21
  • 3