BackBone: get sub view from jquery element

Question

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;
            }
        }
      }
    }
}});

I don't understand what you want on a scroll event. Can you clarify your question, a jsbin would help. [This](http://stackoverflow.com/questions/8591992/backbone-change-model-of-view) might help. — user3995789, Sep 06 '14 at 08:05
thanks for your reply. When i scroll windows i select this post and i need more data from view Post, so i need select again to this view. have one way to do it? — Huy Nguyen, Sep 06 '14 at 08:14
you want to access a view element inside `ListPost` on scroll? Oh you know the dom element and you need the associated backbone view right? — user3995789, Sep 06 '14 at 08:16
yes, i know the dom element **.post** and need to associated the Post view to access model and event. — Huy Nguyen, Sep 06 '14 at 08:31
See if this helps: http://stackoverflow.com/questions/5013848/backbone-js-given-an-element-how-do-i-get-the-view — user3995789, Sep 06 '14 at 08:34

score 2 · Accepted Answer · answered Sep 06 '14 at 08:50

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);
                }
            }
          }
        }
    }
});

BackBone: get sub view from jquery element

1 Answers1