Question

我是Ember的新手，并尝试根据Ember网站和视频提供的教程创建一个简单的应用程序。

在下面的示例中，我想显示两个选项卡Tab1和Tab2;切换到Tab1时应该有＆＃34; Jan＆＃34;和＆＃34; 2月＆＃34 ;;切换到Tab2时应该有＆＃34; Mar＆＃34;和＆＃34; 4月＆＃34;。我可以在选项卡之间切换，但其中没有任何内容，控制台中没有错误。请帮助我理解为什么标签内容为空。谢谢！

这是我的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember test</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-    icons.min.css" rel="stylesheet">
</head>
<body>

  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <ul class="nav">
          <li>{{#link-to 'tab1'}}Tab1{{/link-to}}</li>
          <li>{{#link-to 'tab2'}}Tab2{{/link-to}}</li>
        </ul>
      </div>
    </div>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="tab1">
      <p>{{field1}}</p>
      <p>{{field2}}</p>
  </script>

  <script type="text/x-handlebars" id="tab2">
    <p>{{field3}}</p>
    <p>{{field4}}</p>  
  </script>

  <script src="js/libs/jquery-v1.11.1.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-v1.6.1.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

这是app.js

App = Ember.Application.create();

var tab1 = {
  field1: "Jan",
  field2: "Feb"
};

var tab2 = {
  field3: "Mar",
 field4: "Apr"
};

App.Router.map(function() {
  this.resource('tab1');
  this.resource('tab2');
});

App.tab1Route = Ember.Route.extend({
  model: function() {
    return tab1;
  }
});

App.tab2Route = Ember.Route.extend({
  model: function() {
   return tab2;
  }
});

Answer 1

Ember约定规定了路线的类名称。您的路线类必须命名为App.Tab1Route和App.Tab2Route，而不是App.tab1Route和App.tab2Route。类名的情况很重要。

你的其余代码似乎没问题！

Ember.js中的简单应用程序

1 个答案: