Ember.js中的简单应用程序_Ember.js

Ember.js中的简单应用程序

ember.js

Ember.js中的简单应用程序,ember.js,Ember.js,我是新在余烬，并试图创建一个简单的应用程序的基础上提供的教程余烬网站和视频在下面的示例中，我想显示两个选项卡Tab1和Tab2；切换到表1时，应具有“一月”和“二月”；切换到表2时，应具有“Mar”和“Apr”。我可以在选项卡之间切换，但任何选项卡中都没有内容，控制台中也没有错误。请帮助我了解选项卡内容为空的原因。谢谢这是我的index.html <!DOCTYPE html> <html> <head> <meta charset="utf

我是新在余烬，并试图创建一个简单的应用程序的基础上提供的教程余烬网站和视频

在下面的示例中，我想显示两个选项卡Tab1和Tab2；切换到表1时，应具有“一月”和“二月”；切换到表2时，应具有“Mar”和“Apr”。我可以在选项卡之间切换，但任何选项卡中都没有内容，控制台中也没有错误。请帮助我了解选项卡内容为空的原因。谢谢

这是我的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>

Ember约定要求为路由指定类的名称。您的路线类别必须命名为

App.Tab1Route

和

App.Tab2Route

，而不是

App.Tab1Route

和

App.Tab2Route

。类名的大小写很重要

代码的其余部分似乎很好

您在控制台中有任何错误吗？你能给我们一个到jsbin的链接或者一些有工作代码的东西吗？控制台中没有错误，我可以在选项卡之间切换，但是它们中没有任何内容。对不起，我不能给你代码的链接。好的。我认为您不能任意定义变量并从模型挂钩返回它们。您需要在模型挂钩、控制器或模型类中定义模型作为夹具数据。我想你能找到一个按你自己的方式做这件事的方法。。但它正在摆脱余烬的做法。。因此，这样做您将找不到太多帮助。谢谢您的解释，但是您可以修改代码以帮助我理解吗？这个应用程序是基于Tom Dale的ember“Bloggr”示例创建的（youtube上有一个视频）。无关的问题：为什么这个问题已经被选为-3？？？人们只是投反对票而不是回答？？？

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;
  }
});