Search code examples
javascriptjquerybackbone.js

BackBone: get sub view from jquery element


I render a list Post to template after select it from window scroll event and i need to get model and event in this Post. I want to get view Post for using model or event from route when window scroll event? have a way to do it?

sub view:

Post = Backbone.View.extend({
    tagName: "div",
    className: "post", 

    initialize: function () {
        this.post = this.model;
        this.render();
    },

    render: function () {
        $(this.el).html(this.template(this.post));
        return this;
    }
});

view:

ListPost = Backbone.View.extend({
    tagName: "div",
    className: "listpost", 

    initialize: function(models, options){
        this.listpost = options.listpost;
        this.render();
    },
    render: function () {

    _.each(this.listpost, function (post) {
        $(this.el).append(new Post({model: post}).el);
    }, this);

    return this;
}});

route:

var AppRouter = Backbone.Router.extend({

initialize: function () {
    $('body').html(new ListPost([], {listpost: posts}).el);
    window.onscroll = this.scroll;
},

scroll : function() {
    var element = $('.post');
    var find_out = false;
    for(var i = 0; i< element.length; i++) {
        if(find_out) break;
        var post = element[i];
      if(post.getBoundingClientRect) {
        var rect = post.getBoundingClientRect();
        x = rect.bottom;
        y = rect.top;
        if(x > 0) {
            if(x > 480/3) {
                //result is post
                // how i can select this post to sub view Post
                find_out = true;
            }
        }
      }
    }
}});

Solution

  • Move the scroll functionality to the ListPost so you can have an array of views in your scope.

    Example:

    ListPost = Backbone.View.extend({
        tagName: "div",
        className: "listpost", 
    
        initialize: function(models, options){
            this.listpost = options.listpost;
    
            // Add scroll event here ($.proxy makes sure the event can see this.element).
            $(document).scrool( $.proxy(this.scroll, this) );
    
            this.render();
    
            // Create an array to hold a reference to all Post views.
            this.element = [];
        },
    
        render: function () {
            _.each(this.listpost, function (post) {
                // Create the post views and add them to the array.
                var postView = new Post({model: post});
                this.element.push( postView );
                $(this.el).append(postView.el);
            }, this);
    
            return this;
        },
    
        scroll: function() {
            var find_out = false;
            // Make sure you use this with element.
            for(var i = 0; i< this.element.length; i++) {
                if(find_out) break;
    
                // Post is now a Backbone view.
                var post = this.element[i];
    
                // Make sure you use post.el to access the views DOM element.
              if(post.el.getBoundingClientRect) {
                var rect = post.el.getBoundingClientRect();
                x = rect.bottom;
                y = rect.top;
                if(x > 0) {
                    if(x > 480/3) {
                        //result is post
                        // how i can select this post to sub view Post
                        find_out = true;
    
                        // Do what you want with the backbone view.
                        post.render();
                        console.log(post.model);
                    }
                }
              }
            }
        }
    });