骨干查看：可以不是视图追加到先前渲染视图

app.js

window.App = { 
Models: {}, 
Views: {} 
}; 

window.Template = {};

应用程序/ router.js

App.Router = Backbone.Router.extend({ 

    initialize: function() { 
    Backbone.history.start({pushState: true}); 
    App.layout = new App.Views.Layout(); 
    App.layout.render(); 
    $('#app').append(App.layout.el); 
    }, 

    routes: { 
    '': 'index' 
    }, 

    index: function() { 
    console.log('index routed.'); 
    App.home = new App.Views.Home(); 
    App.home.render(); 
    $('#content').html(App.home.el); 
    } 
});

应用程序/模板.js

Template.layout = _.template(
    "<header id=top-bar>"+ 
    "<nav id=user-panel>"+ 
    "<ul>"+ 
    "<li><a class=login href=#>Login</a></li>"+ 
    "<li><a class=register href=#>Registrati gratis</a></li>"+ 
    "</ul>"+ 
    "</nav>"+ 
    "</header>"+ 
    "<div id=wrapper>"+ 
    "<section id=mid-bar>"+ 
    "<a id=logo href=#><img src=public/img/logo.png></a>"+ 
    "</section>"+ 
    "<section id=content>"+ 
    "</section>"+ 
    "</div>" 
); 

Template.home = _.template("Benvenuto in Virtualmix");

app/views/l ayout.js

App.Views.Layout = Backbone.View.extend({ 
    id: 'container', 

    template: Template.layout, 

    render: function() { 
    this.$el.html(this.template); 
    } 
});

应用程序/视图/ home.js

App.Views.Home = Backbone.View.extend({ 

    tagName: 'p', 

    template: Template.home, 

    render: function() { 
    this.$el.html(this.template); 
    } 
});

最后我main.js

$(document).ready(function() { 
    App.router = new App.Router; 
});

好，布局视图（从路由器初始化函数初始化。 ..）正确呈现，但从索引函数初始化和呈现的主视图似乎不会在我以前生成的布局上输出任何内容（我想嵌套在由布局生成的#content元素上...）。

我认为这是一个jQuery的问题，但我无法弄清楚如何以及为什么...

来源

2013-01-15 cl0udw4lk3r

的问题是，你得太早打电话Backbone.history.start()。当您启动历史记录时，将立即触发路线，此时您的LayoutView尚未呈现，并且页面上没有#content元素。

的骨干docs说：

在页面加载，您的应用程序后，创建完所有的路由器的，一定要调用Backbone.history.start（）... [重点煤矿]
：

我想还是我的主（“APP”）路由器负责启动的历史，所以我通常在路由器上创建一个start方法

，并调用它像这样：

var appRouter = new AppRouter(); 
var otherRouter = new OtherRouter(); // if you have any 
appRouter.start();

来源

2013-01-15 16:58:18 jevakallio

骨干查看：可以不是视图追加到先前渲染视图

回答

相关问题