Question

我从窗口滚动事件中选择它后，将一个列表发布到模板，我需要在此帖子中获取模型和事件。我想在窗口滚动事件的时候从路线使用模型或者事件看Post有办法吗？

子视图：

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

视图：

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

路线：

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

Answer 1

将scroll功能移至ListPost，以便在您的范围内拥有一系列观看次数。

示例：

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：从jquery元素获取子视图

1 个答案: