Javascript 为什么不是'；t视图中的数据建模_Javascript_Ember.js

Javascript 为什么不是'；t视图中的数据建模

javascript ember.js

Javascript 为什么不是'；t视图中的数据建模,javascript,ember.js,Javascript,Ember.js,我正在尝试构建一个datepicker日历应用程序，但我似乎无法让视图组件工作。数据显示在余烬检查器中，但视图组件为空。我一直在浏览一个又一个网站，但似乎看不出哪里出了问题 <body> <script type="text/x-handlebars" data-template-name="application"> <div id="navbar"> <ul> <li>{{#link-

我正在尝试构建一个datepicker日历应用程序，但我似乎无法让视图组件工作。数据显示在余烬检查器中，但视图组件为空。我一直在浏览一个又一个网站，但似乎看不出哪里出了问题

<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'
    }];



{{{链接到“日历”}日历{{/链接到}
{{{链接到“about”}关于{{/链接到}

{{outlet}}
页脚信息在这里！
关于
我的日历日期选择器！
日历页
下一个
今天
返回

{{name}}
{{#每个月}
{{days}
{{else}
没有数据。
{{/每个}}

App=Ember.Application.create({
日志转换：true
});
App.Router.map（函数（）{
本文件。资源（“日历”）；
本资源（“关于”）；
});
App.CalendarRoute=Ember.Route.extend({
模型：函数（）{
返回月份；
}
});
//日历控制器
App.CalendarController=Ember.ObjectController.extend（{}）；
//日历数据
风险值月份=[
{
id:1，
姓名：‘一月’，
天数：31
}, {
id:2，
姓名：'二月'，
天数：28
}, {
id:3，
姓名:"三月",，
天数：31
}, {
id:4，
姓名：‘四月’，
天数：30
}, {
id:5，
姓名：“May”，
天数：31
}, {
id:6，
姓名：‘六月’，
天数：30
}, {
id:7，
姓名：‘七月’，
天数：31
}, {
id:8，
姓名：‘八月’，
天数：31
}, {
id:9，
名称：‘九月’，
天数：30
}, {
id:10，
名称：'十月'，
天数：31
}, {
id:11，
名称：‘十一月’，
天数：30
}, {
id:12，
名称：'十二月'，
天数：31
}];
var天数=[
{
id:1，
姓名：“星期一”
}, {
id:2，
姓名：“星期二”
}, {
id:3，
姓名：“星期三”
}, {
id:4，
姓名：“星期四”
}, {
id:5，
姓名：“星期五”
}, {
id:6，
姓名：“星期六”
}, {
id:7，
姓名：“星期日”
}];

模板很好，所有视图都按应有的方式呈现

也许你错过了规定的路线

App.Router.map(function() {
  this.route("application");
  this.route("about");
  this.route("calendar");
});

编辑-回复评论

老实说，我没有太注意模板的内容，有几个错误导致了这一点

1。模板

about

中的元素

没有结束标记（有语法

）

2。模板

日历中的元素表没有结束标记（有语法
）
3。关联的孤立对象{{{else}
，位于{{each}
中，具有{if}

更新示例，

hbs（已更正）


{{{链接到“日历”}日历{{/链接到}
{{{链接到“about”}关于{{/链接到}

{{outlet}}
页脚信息在这里！
关于
我的日历日期选择器
日历页
下一个
今天
返回

{{name}}
{{#如果是月}
{{#每个月}
{{days}
{{/每个}}
{{else}
没有数据。
{{/if}

Ok，但为什么它一直附加视图？@LineyHamilton你是对的，没有注意到：），我只是提供了一个更新的链接，其中更正了与模板相关的语法错误。太棒了。。。If语句修复了吗？@LineyHamilton yes纠正了与html和handlebar相关的语法错误，答案中显示的三点修复了它。
    <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>