Question

我正在尝试构建一个datepicker日历应用程序，但我似乎无法使视图组件正常工作。数据显示在Ember Inspector中，但视图组件为空白。我一直在审查网站后我似乎无法看到它出错的地方。

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

Answer 1

模板很好，所有视图都按照它们的颜色呈现

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>

为什么不在视图中进行数据建模

1 个答案: