BackBone：从 jquery 元素获取子视图答案

【问题标题】：BackBone: get sub view from jquery elementBackBone：从 jquery 元素获取子视图
【发布时间】：2014-10-31 03:08:52
【问题描述】：

从窗口滚动事件中选择后，我将列表 Post 渲染到模板，我需要在此 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;
            }
        }
      }
    }
}});

【问题讨论】：

我不明白你想要的滚动事件。你能澄清你的问题吗，一个jsbin会有所帮助。 This 可能会有所帮助。
感谢您的回复。当我滚动窗口时，我选择了这篇文章，我需要更多来自视图帖子的数据，所以我需要再次选择这个视图。有一种方法吗？
您想在滚动时访问ListPost 内的视图元素吗？哦，你知道 dom 元素，你需要相关的主干视图吗？
是的，我知道 dom 元素 .post 并且需要关联 Post 视图以访问模型和事件。
看看这是否有帮助：stackoverflow.com/questions/5013848/…

标签： javascript jquery backbone.js

【解决方案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);
                }
            }
          }
        }
    }
});

【讨论】：