我正在尝试构建一个日期选择器日历应用程序，但我似乎无法让 View 组件正常工作。 数据显示在 Ember 检查器中，但 View 组件是空白的。我一直在审查一个又一个站点，但我似乎看不出哪里出了问题。
<body>
<script type="text/x-handlebars" data-template-name="application">
<div id="navbar">
<ul>
<li>{{#link-to "calendar"}}Calendar{{/link-to}}</li>
<li>{{#link-to "about"}}About{{/link-to}}</li>
</ul>
</div>
<div id="content"> {{outlet}} </div>
</div>
<footer id='container'>Footer information here!</footer>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h1>About</h1>
<p>My calendar Date picker!</>
</script>
<script type="text/x-handlebars" data-template-name="calendar">
<h1>Calendar Page</h1>
<button>Next</button>
<button>Today</button>
<button>Back</button>
<hr>
<table>
<thead>
<tr><td>{{name}}</td></tr>
</thead>
{{#each months}}
<tr><td>{{days}}</tr></td>
{{else}}
No data.
{{/each}}
</tabel>
<hr>
</script>
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.resource("calendar");
this.resource("about");
});
App.CalendarRoute = Ember.Route.extend({
model: function(){
return months;
}
});
// calendar controller
App.CalendarController = Ember.ObjectController.extend({});
// calendar data
var months = [
{
id: 1,
name: 'January',
days: 31
}, {
id: 2,
name: 'Febuary',
days: 28
}, {
id: 3,
name: 'March',
days: 31
}, {
id: 4,
name: 'April',
days: 30
}, {
id: 5,
name: 'May',
days: 31
}, {
id: 6,
name: 'June',
days: 30
}, {
id: 7,
name: 'July',
days: 31
}, {
id: 8,
name: 'August',
days: 31
}, {
id: 9,
name: 'September',
days: 30
}, {
id: 10,
name: 'October',
days: 31
}, {
id: 11,
name: 'November',
days: 30
}, {
id: 12,
name: 'December',
days: 31
}];
var days = [
{
id: 1,
name: 'Monday'
}, {
id: 2,
name: 'Tuesday'
}, {
id: 3,
name: 'Wednesday'
}, {
id: 4,
name: 'Thursday'
}, {
id: 5,
name: 'Friday'
}, {
id: 6,
name: 'Saturday'
}, {
id: 7,
name: 'Sunday'
}];
最佳答案
模板很好，所有 View 都按应有的方式呈现
http://emberjs.jsbin.com/surozime/1/edit
也许你错过了所需的路线，
App.Router.map(function() {
this.route("application");
this.route("about");
this.route("calendar");
});
编辑 - 回复评论
老实说没有太注意模板的内容，有几个错误导致了这个。
1.元素 p 没有结束标签在模板中about (有一个语法 </> )。
2.元素table 没有结束标签在模板中calendar (有一个语法 </tabel> )。
3.相关孤儿{{else}}那是在 {{each}} 内, 与 {{if}} .
更新示例， http://emberjs.jsbin.com/surozime/4/edit
hbs (已更正)
<script type="text/x-handlebars" data-template-name="application">
<div id="navbar">
<ul>
<li>{{#link-to "calendar"}}Calendar{{/link-to}}</li>
<li>{{#link-to "about"}}About{{/link-to}}</li>
</ul>
</div>
<div id="content"> {{outlet}} </div>
</div>
<footer id='container'>Footer information here!</footer>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h1>About</h1>
<p>My calendar Date picker!</p>
</script>
<script type="text/x-handlebars" data-template-name="calendar">
<h1>Calendar Page</h1>
<button>Next</button>
<button>Today</button>
<button>Back</button>
<hr>
<table>
<thead>
<tr><td>{{name}}</td></tr>
</thead>
{{#if months}}
{{#each months}}
<tr><td>{{days}}</tr></td>
{{/each}}
{{else}}
No data.
{{/if}}
</table>
<hr>
</script>
关于javascript - 为什么 View 中没有数据建模，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22601667/