1

我正在为我目前正在构建的 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页面加载时存在的不同元素，但骨干似乎无法找到它，为什么会这样？难道我做错了什么？

4

0 回答 0