Question

我已经玩了一段时间了，也许这归结于我不理解Ember（和/或ember-cli）如何区别对待路线和资源，但我试图实现像这样的界面，我的路由器和文件结构应该是ember-cli的问题。我已经多次阅读过Ember文档，但它仍然没有全部点击给我。

所需的界面 desired interface

它主要有效，但在查看/projects时，我看不到徽标，在查看/project/1/details[team | budget]时，我看不到我的导航，这是在我的项目中文件。

router.js

Router.map(function() {
    this.route('projects');
    this.resource('project', { path: 'project/:project_id' }, function() {
        this.route('details');
        this.route('team');
        this.route('milestones');
        this.route('budget');
    });
});

文件结构

App/
    routes/
        index.js
        projects.js
        project.js
    templates/
        application.hbs
        index.hbs
        projects.hbs
        project/
            index.hbs
            budget.hbs
            details.hbs
            team.hbs

Answer 1

的javascript

App = Ember.Application.create();

App.Router.map(function() {


  this.route('projects');

  this.resource('project', {path: 'projects/:id'}, function () {
    this.route('details');
    this.route('team');
    this.route('milestones');
    this.route('budget');
  });
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.ProjectsRoute = Ember.Route.extend({
  model: function() {
    return [
      Ember.Object.create({id: 1, name: "John"}), 
      Ember.Object.create({id: 2, name: "Bob"})
    ];
  }
});

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
</head>
<body>

  <script type="text/x-handlebars">
    {{#link-to 'index'}}<h2>Welcome to Ember.js</h2>
    Logo<br/><br/>
    {{/link-to}}
  {{#link-to 'projects'}}Projects{{/link-to}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  <div class='index'>
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="projects">
  <div class='projects'>
    <h3>Projects</h3>
     {{#each}}
      <li>{{#link-to 'project' this}}{{name}}{{/link-to}}</li>
    {{/each}}

    {{outlet}}
    </div>
  </script>

    <script type="text/x-handlebars" data-template-name="project">
  <div class='project'>
      <h4>{{name}}</h4>
      <ul>
      <li>{{#link-to 'project.details'}}Details{{/link-to}}</li>
      <li>{{#link-to 'project.team'}}Team{{/link-to}}</li>
      <li>{{#link-to 'project.milestones'}}Milestones{{/link-to}}</li>
            <li>{{#link-to 'project.budget'}}Budget{{/link-to}}</li>
      </ul>
    {{outlet}}
    </div>
  </script>

      <script type="text/x-handlebars" data-template-name="project/details">
  Some deets
  </script>

        <script type="text/x-handlebars" data-template-name="project/team">
  the team
  </script>

          <script type="text/x-handlebars" data-template-name="project/milestones">
  milestones
  </script>


          <script type="text/x-handlebars" data-template-name="project/budget">
  budget
  </script>
</body>
</html>

http://emberjs.jsbin.com/kovuxo/1#/

如何编写我的Ember路由器来实现所需的界面？

1 个答案: