为什么骨干不能找到HTML元素

时间:2013-10-28 12:15:21

标签: javascript jquery backbone.js underscore.js backbone-views

我正在构建我正在构建的Web应用程序的文件库视图,应用程序背后的基础是,

  • 有一个项目。
  • 每个项目可以拆分为多个项目
  • 用户可以将文件上传到项目或项目
  • 如果文件已上传,则会显示在项目库和文件库中。物品库

我当前遇到的问题是我可以查看项目文件库。没有问题,这是我正在使用的代码,

加载文件视图

loadFileView: function() {
    var fileView = new app.ProjectFilesView({
        collection:app.FileList
    });
    this.$el.find('#files').html(fileView.render().el);
    fileView.addRepo();
},

项目文件视图

render: function() {

    this.$el.html(this.template({

        fileDetails: this.collection,
        p: app.project.toJSON()

    }));

    console.log(this.collection)

    return this;
},

addRepo: function(filter) {

    var repoView = new app.ProjectFilesRepoView;

    this.$el.parents("#files").find('.file_content:first').append(repoView.render().el);

},

创建FilePanelWrapperView

new app.FilePanelWrapperView({
    collection : app.FileList
});

这段代码实际上是构建库(以网格格式显示)。

initialize: function() {
    //this.model.on('change', this.updateVisibility, this);
    this.addFiles();
    this.listenTo(this.collection, 'remove', this.updateCounter);
    this.listenTo(this.collection, 'add', this.addNewOne);

 },

 addFiles: function() {
      //this.$('ul.share').html('');
  this.collection.each(this.addOne, this);
 },

 addOne: function( file ) {

    var view = new app.FilePanelView({
        model: file
    });

    view.render().el;

    var expander = $('article.project_files').find('span.expander').length;

    if (expander == 0) {

        $('article.project_files header h1').prepend('<span class="expander"></span>');
        //bind the expander
        $('.expander').unbind('click').click($.initExpanders.expander);
    //$('.file_content').show();

    }
},

渲染项目

renderItem: function() {

    //console.log(this.template(this.model.toJSON()));

    $("body .tab-content.files ul.image-grid").prepend(this.template(this.model.toJSON()));

    this.$el.find(".thumb-panel-container").tipTip({
        delay: 0,
        defaultPosition: "top"
    }).hover(function() {
        $(this).children(".thumb-panel-menu").fadeIn(100);
    ;
    },function () {
        $(this).children(".thumb-panel-menu").fadeOut(100)
    ;
    });

    $("time").timeago();

    return this;
}

现在对于项目库我几乎都在做相同的代码,但是想要将它应用到页面加载中的其他元素.tab-content.files .image-grid,但是主干似乎无法找到它为什么会这样?我做错了吗?

0 个答案:

没有答案