[英]Views not rendering, Regions vs. Layouts
即使在阅读了Wiki和有关何时使用布局与区域等内容的示例后,我仍然有些困惑,但是我的问题是我什么都无法显示在页面上-根本没有渲染。 html实际上仅应具有菜单和内容,并且可以基于“视图”更改内容。 (我以相同的方式做菜单,所以我也可以交换菜单)。
我有一个html文件:
<!-- DefaultLayout -->
<script type="text/template" id="template-default">
<div id="region-navbar">
region-navbar
</div>
<div id="region-content">
region-content
</div>
</script>
<!-- NavBar -->
<script type="text/template" id="template-navbar">
<div id="navbar">
my freakin navbar
</div>
</script>
<!-- ViewOne -->
<script type="text/template" id="template-view1">
<div id="view1">
my freakin view
</div>
</script>
<!-- RegionContainer -->
<div id="default-layout-container">
</div>
对于本示例,我将js压缩为一个文件app.coffee :
window.App = { }
# Region
class RegionContainer extends Backbone.Marionette.Region
el: '#default-layout-container'
# Called on the region when the view has been rendered
onShow: (view) ->
console.log 'onShow RegionContainer'
App.RegionContainer = RegionContainer
# Layout
class DefaultLayout extends Backbone.Marionette.Layout
template: '#template-default'
regions:
navbarRegion: '#region-navbar'
contentRegion: '#region-content'
App.DefaultLayout = DefaultLayout
# NavBar (View)
class NavBar extends Backbone.View
el: '#template-navbar'
initialize: () ->
console.log 'init App.NavBar'
App.NavBar = NavBar
# A View
class ViewOne extends Backbone.View
el: '#template-view1'
initialize: () ->
console.log 'init App.ViewOne'
App.ViewOne = ViewOne
# App
$ ->
# Create application, allow for global access
MyApp = new Backbone.Marionette.Application()
App.MyApp = MyApp
# On application init...
MyApp.addInitializer (data) ->
console.log 'init App.MyApp'
# RegionContainer
regionContainer = new App.RegionContainer
# Layout (holds Views)
defaultLayout = new App.DefaultLayout
regionContainer.show defaultLayout
# Views
navBarView = new App.NavBar
navBarView.render()
viewOne = new App.ViewOne
viewOne.render()
defaultLayout.navbarRegion.show navBarView
defaultLayout.contentRegion.show viewOne
data =
that: 'this'
MyApp.start data
console.log显示:
onShow RegionContainer app.js:19
init App.NavBar app.js:44
init App.ViewOne
init App.MyApp
我已经阅读了100万次docs / examples,但是所有这些东西的学习曲线都很复杂。 请帮忙!
您混淆了几件事,但是您快到了
ViewOne
和NavBar
不应扩展Backbone.View
而应扩展Backbone.Marionette.ItemView
您不应在el
属性中为ViewOne
和NavBar
定义模板,而应顾名思义,在template
属性中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.