0

Ember.js でデータ駆動型のメニュー システムをまとめようとしています。JavaScript は次のjs/nodal.jsとおりです。

window.Form = Ember.Application.create();

var menuOptions = [
{id: "root",
 options: [ "a", "b" ]},
{id: "a",
      name: "Option A",
 options: [ "c", "d" ]},
{id: "b",
  name: "Option B",
 options: [ "e", "f" ]},
{id: "c",
 name: "Option C"},
{id: "d",
 name: "Option D"},
{id: "e",
 name: "Option E"},
{id: "f",
 name: "Option F"}
]

Form.MenuOption = Ember.Object.extend({});

var builtOptions = menuOptions.map( function(attrs) {
return Form.MenuOption.create( attrs );
});

Form.options = {};
for( i = 0; i < builtOptions.length; i++ ) {
var opt = builtOptions[i];
Form.options[opt.id] = opt;
}

Form.MenuRoute = Ember.Route.extend({
model: function(params){
    console.log( params );
    if( !params || !params.index_id || params.index_id == "undefined") {
    params.index_id = "root";
    }
    var keys = Form.options[params.index_id].options;
    var options = new Array();
    keys.map(function(k){ options.push( Form.options[k] ); });
    return options;
  }    
});

Form.IndexRoute = Ember.Route.extend({
redirect: function(){
        /* This here is the problem line... */
    this.transitionTo( "menu", Form.options.root );
}
});

Form.Router.map(function(){
this.resource( "menu", { path: "/menu/:index_id" } );
});

HTML は次のようになります。

  <title>Hello</title>
  <meta name="description" content="My First Ember.js App">
  <meta name="author" content="Your Name Here">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <script data-template-name="application" type="text/x-handlebars">
<h1>Title Goes Here</h1>
{{outlet}}
  </script>


  <script data-template-name="menu" type="text/x-handlebars">
<ul>
{{#each controller}}
  <li>{{#linkTo menu this}}{{name}}{{/linkTo}}</li>
{{/each}}
</ul>
  </script>


  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars.js"></script>
  <script src="js/libs/ember-1.0.0-rc.1.js"></script>
  <script src="js/nodal.js"></script>
</body>
</html>

私が望むのは、ユーザーが/menu/rootページを開くとすぐにリダイレクトされることです。これまでのところ、これを機能させるための適切な呪文を見つけることができませんでした. 上記をロードすると、次の例外が発生します。

Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated menu controller):ember172>

直接ロードindex.html#/menu/rootすると機能します-機能していないのはリダイレクトだけです。this.transitionToIndexRoute 定義の行を次のように置き換えます。

this.transitionTo( "menu", [Form.options.root] );

は/menu/undefinedリダイレクトしますが、 ではなくにリダイレクトし/menu/rootます。それは醜く、明らかに壊れています。

私は何を逃したのですか？

編集

提案どおり、ArrayController を追加してみました。

Form.MenuController = Ember.ArrayController.extend({});

これにより、新しいエラーが発生します。

arrangedContent.addArrayObserver is not a function
4

2 に答える 2

0

問題は、URL が 1 つのモデルで作業していると想定していることですが、transitioTo とモデル フックでは配列を渡したり返したりしていることです。MenuRoute は常に1 つのMenuOption についてですよね?

したがって、私はお勧めします：

Form.MenuRoute = Ember.Route.extend({
model: function(params){
    console.log( params );
    if( !params || !params.index_id || params.index_id == "undefined") {
    params.index_id = "root";
    }
    var menuOption = Form.options[params.index_id];
    return menuOption;
  }    
});

この場合、対応するテンプレートは次のようになります。

<script data-template-name="menu" type="text/x-handlebars">
<ul>
{{#each option in controller.content.options}}
  <li>{{#linkTo menu option}}{{option.name}}{{/linkTo}}</li>
{{/each}}
</ul>
</script>
于 2013-02-23T17:12:40.457 に答える
0

エラーメッセージは基本的に、ビューのコンテンツとして配列または配列コントローラーのいずれかを期待しているが、代わりに生成されたコントローラーを受け取ることを示しています(コントローラーは、ルートにコントローラーが定義されていない場合に生成されます)。ルートのmodelメソッドは配列を返すため、適切なコントローラーでラップする必要があります - ArrayController. 拡張するメニュールートのカスタム コントローラーを定義する必要がありArrayControllerます。これにより、エラー メッセージが表示されなくなります。

編集

ルーティングについて: 次のように、各メニュー オプションをメニューリソースにネストされたルートとして定義する必要があると思います。

Form.Router.map(function(){
    this.resource( "menu", { path: "/menu/:index_id" }, function () {
        this.route('root');
        this.route('a');
        this.route('b');
        ...
    });
});

これには、ルートごとにRouteクラスを定義する必要もあります。

于 2013-02-20T08:15:05.277 に答える