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.transitionTo将 IndexRoute 定义中的行替换为：

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

错误消息基本上说视图需要数组或数组控制器作为视图的内容，但会接收生成的控制器（当没有为路由定义控制器时生成控制器）。路由的model方法返回数组，因此它必须用适当的控制器包装 - ArrayController. 您应该为扩展的菜单路由定义一个自定义控制器ArrayController- 这将消除错误消息。

编辑

关于路由：我认为您应该将我们的每个菜单选项定义为嵌套在菜单资源中的路由，如下所示：

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

这还需要为每条路线定义路线类..

于 2013-02-20T08:15:05.277 回答
0

问题是您的 URL 假定您正在使用一个模型，但在 transitioTo 和您的模型挂钩中，您正在传递/返回一个数组。你的 MenuRoute 总是关于一个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 回答