Question

我有这个奇怪的问题，当我去页面时，视图没有出现。但是，如果我刷新页面，它就会出现。

在我的路由器中，我尝试渲染2个视图：

tags: function(tags) {
        self = this;
        self.multipleTags = tags.split('/');
        self.tagsArray = $.grep(self.multipleTags, function(item,index) {
            return (item != '');
        });
        var browseHeader = new BrowseHeader;
        var content = new tagsView({query:self.tagsArray});
    },

虽然我的浏览器遇到了问题但是tagsView工作正常。 我确实尝试删除了我的tagsView 以查看它们是否存在冲突。但是，即使使用单个视图渲染，在刷新页面之前标题仍然不会显示。

以下是我在BrowseHeader视图中所做的事情：

var browseHeader = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    template: function() {
        dust.render('dust/browseHeader','', function(error, output) {
            $('#wrapper').append(output);
        });
    },
    render: function() {
        this.template();
    },
    el: '#wrapper',
    events: {
        'click .academy_filter' : "click_filter"
    },
    click_filter: function(event) {
        target = event.target;
        $('.academy_filter').removeClass('active');
        $(target).addClass('active');
        EventBus.trigger('header:click_filter', target);
    }
});

当我在console.log输出时，它会显示输出的html，尽管它没有显示在页面上。所以我知道我的防尘模板正在运行。当我将BrowseHeader渲染函数简化为$（'＃wrapper'）。append（“this”）;我仍然遇到同样的问题。

有什么想法吗？

更新：显然它与浏览器和pushState有关，因为当我将路由器更改为以下内容时，它运行正常。

Backbone.history.start（{pushState：true}）;

Answer 1

据我所知，你的观点没有错。这很可能是一个时间问题。您的视图可能在DOM中存在#wrapper之前被初始化（并因此呈现）。我的猜测是，如果您尝试以下操作，输出将为0：

dust.render('dust/browseHeader','', function(error, output) {
  console.log($('#wrapper').length);
  $('#wrapper').append(output);
});

确保在DOM加载完成后创建视图，如下所示：

$(document).ready(function() {
  var header = new browseHeader();
});

Backbone View不会在首页加载时呈现

1 个答案: