目的のインターフェイスを実現するためにEmberルーターを作成するにはどうすればよいですか？

debugcn 投稿 Dev

redOctober13

私はこれをしばらく遊んでいますが、Ember（および/またはember-cli）がルートとリソースをどのように異なる方法で処理するかを理解していないことが原因かもしれませんが、このようなインターフェイスを実現しようとしていて問題があります私のものにルータおよびファイル構造は残り火-cliのためでなければなりません。Emberのドキュメントを何度も読んだことがありますが、それでもすべてがクリックされるわけではありません。

必要なインターフェース 必要なインターフェイス

ほとんど機能しますが、表示する/projectsとロゴが表示され/project/1/details[team | budget]ず、表示すると、project.hbsファイルにあるナビゲーションが表示されません。

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

デビッド

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#/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-29

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

目的のインターフェイスを実現するためにEmberルーターを作成するにはどうすればよいですか？

目的のインターフェイスを実現するためにEmberルーターを作成するにはどうすればよいですか？

インターフェイスの匿名実装を作成するにはどうすればよいですか？

PHP：記事を作成するための優れたインターフェースを作成するにはどうすればよいですか？

C ++とインターフェイスするためにRustで列挙型の表現型を指定するにはどうすればよいですか？

非同期使用のために設計されたインターフェースを適切に実装するにはどうすればよいですか？

ラスターベースのシェープファイルのIDごとにトリミングされたラスターを作成するためのループを作成するにはどうすればよいですか？

Dapperを使用するためにASP.NETCoreにIConfigurationインターフェイスを実装するにはどうすればよいですか？

フィールドの関数型インターフェースの実装を作成するにはどうすればよいですか？

JSON形式のインターフェースを作成するにはどうすればよいですか？

Page <>インターフェイスのDTOを作成するにはどうすればよいですか？

インターフェイスの基本プロパティを作成し、派生したもので実装するにはどうすればよいですか？

インターフェイスに、インターフェイスの具体的な実装タイプを参照するメソッドをシグニチャーまたは戻り値の型に含めるにはどうすればよいですか？

「タイプアロング」スタイルのインターフェースを作成するにはどうすればよいですか？

TLBによって生成されたDelphiコードを実現するために、C＃で記述されたインターフェイスをエクスポートするにはどうすればよいですか？

実装への依存関係を作成せずに、インターフェイスの実装を使用するにはどうすればよいですか？

Reactクラスのインターフェース内にインターフェースを含めるにはどうすればよいですか？

wxpythonインターフェースの優れたコンストラクターを作成するにはどうすればよいですか？

Pythonでインターフェイスを実装するにはどうすればよいですか？

異なるクラスに対して1つのインターフェイス実装を作成するにはどうすればよいですか？

ファイルをターゲットにコピーするためのDebian /ルールを作成するにはどうすればよいですか？

インターフェイスに別のインターフェイスを実装させるにはどうすればよいですか

TypeScriptのインターフェイスからUnionまたはPickタイプを作成するにはどうすればよいですか？

Iterableインターフェースを実装するにはどうすればよいですか？

タイプによって実装されているインターフェイスを正しくチェックするためのフローを取得するにはどうすればよいですか？

リボンを作成するためにreact-nativeでビューのスタイルを設定するにはどうすればよいですか？

Springでのテスト中にCrudRepositoryインターフェイスのインスタンスを作成するにはどうすればよいですか？

上下にスクロールするためのカスタムイベントを作成するにはどうすればよいですか？

typescriptでシンボルインデックスを取得するインターフェイスを作成するにはどうすればよいですか？

作成ロジックを指定するインターフェイスまたは抽象クラスを作成するにはどうすればよいですか？

SWIGのインターフェースを満たすPythonクラスを作成するにはどうすればよいですか？