使用Ember.js加载单个模型

Question

我正在尝试编写一个非常简单的应用程序：我有一些游戏（例如国际象棋，麻雀……等等），每个游戏都有多个棋盘。 我想显示一个游戏列表，然后在单击一个游戏时显示一个棋盘列表。

但是我面临很多问题。 我将首先描述它们，然后粘贴代码：

游戏列表正确显示。 没问题
当我单击游戏时，出现以下错误：
Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated game controller):ember237>

但是，如果我按F5键或手动编写URL， 一切正常 。 而且我不知道为什么。
更新：我已经看到，如果我更改games模板，使用手写链接更改{{#linkTo}} ，一切正常：
- 这是无效的linkTo： {{#linkTo 'game' game}}{{game.name}}{{/linkTo}} 。 它可以正确构建URL，但是单击它时将失败。
- 这是一个手写的<a>标签： <a href="#/games/{{unbound game.id}}">{{game.name}}</a> 。 它运作完美。
每个委员会的网址应遵循以下格式：
/games/1/boards/5

但是，当我编写{{#linkTo 'board' board}} ，我得到的是：
/games/undefined/boards/5

这是代码（您可以在JBin中看到一个“有效的”副本。但是它不起作用，因为它在本地REST应用程序上中继）：

路由器：

MGames.Router.map(function () {
    this.resource('games', function () {
        this.resource ('game', {path: '/:game_id'}, function () {
            this.resource('board', {path: '/boards/:board_id'});
        });
    });
});

MGames.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('games');
    }
});

MGames.GamesRoute = Ember.Route.extend ({
    model: function() {
        return MGames.Game.findAll();
    }
});

MGames.GameRoute = Ember.Route.extend ({
    model: function(params) {
        return MGames.Board.findAllByGame(params.game_id);
    }
});

MGames.BoardsRoute = Ember.Route.extend ({
    model: function(params) {
        return this.modelFor('game').then(
            function (game) {
                return MGames.Board.find(game.get('id'), params.board_id);
            }
        );
    }
});

型号：

MGames.Game = Ember.Object.extend({
    id: null,
    name: null,
    icon: null
});

MGames.Game.reopenClass({
    findAll: function() {
        var url = [MGames.GAMES_API_URL];
        url.push ('games');
        url = url.join('/');

        var result = Ember.ArrayProxy.create({ content: [] });

        $.getJSON(url).then (
            function (response) {
                response.forEach(function (child) {
                    result.pushObject (MGames.Game.create(child));
                });
            }
        );

        return result;
    },

    find: function (id) {
        var url = [MGames.GAMES_API_URL];
        url.push ('games');
        url.push (id);
        url = url.join('/');

        var game = MGames.Game.create({ isLoaded: false });

        $.getJSON(url).then (
            function(response) {
                game.setProperties(response);
                game.set('isLoaded', true);
            }
        );

        return game;
    }
});

MGames.Board = Ember.Object.extend({
    id: null,
    name: null,
    owner: null,
    game: null,
    is_public: null,
    created_at: null
});

MGames.Board.reopenClass({
    findAllByGame: function (game) {
        var url = [MGames.GAMES_API_URL];
        url.push ('games');
        url.push (game);
        url.push ('boards');
        url = url.join('/');

        var result = Ember.ArrayProxy.create({ content: [] });

        $.getJSON(url).then (
            function (response) {
                console.log (response);
                response.forEach(function (child) {
                    result.pushObject (MGames.Board.create(child));
                });
            }
        );

        return result;
    },

    find: function (game, board) {
        url = [MGames.GAMES_API_URL];
        url.push ('games');
        url.push (game);
        url.push ('boards');
        url.push (board);
        url = url.join('/');

        var result = MGames.Board.create();

        $.getJSON(url).then (
            function(response) {
                result.setProperties(response);
            }
        );

        return result;
    }
});

和模板：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MGames</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>

  <script type="text/x-handlebars">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">{{#linkTo 'index' class="brand"}}MGames{{/linkTo}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" id="games">
    <div class="row">
      <header id="header">
        <h1>Games</h1>
      </header>
      <ul>
      {{#each game in controller}}
      <li>
        {{#linkTo 'game' game}}{{game.name}}{{/linkTo}}
      </li>
      {{/each}}
      </ul>

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

  <script type="text/x-handlebars" id="game">
    <div class="row">
      <div class="span3" id="boards">
        <header id="header">
          <h1>Boards</h1>
        </header>

        <ul id="board-list">
          {{#each board in controller}}
          <li>
            {{#linkTo 'board' board}}{{board.name}}{{/linkTo}}
          </li>
          {{/each}}
        </ul>
      </div>
      <div class="span9">
        {{outlet}}
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="board">
    <header id="header">
      <h1>{{game.name}} - {{name}} <small>{{owner.nickname}}</small></h1>
    </header>
  </script>

  <script src="js/libs/jquery.js"></script>
  <script src="js/libs/bootstrap.js"></script>
  <script src="js/libs/handlebars.js"></script>
  <script src="js/libs/ember.js"></script>

  <script src="js/application.js"></script>
  <script src="js/router.js"></script>
  <script src="js/models/game.js"></script>
  <script src="js/models/user.js"></script>
</body>
</html>

Answer 1

好的，我终于解决了问题。 在我的gameRoute我这样写：

MGames.GameRoute = Ember.Route.extend ({
    model: function(params) {
        return MGames.Board.findAllByGame(params.game_id);
    }
});

当我直接在浏览器栏中写URL时，它起作用了，因为Ember调用了model函数，但是当跟随{{#linkTo}} ，模型是作为参数传递的model ，因此不调用model函数。

因此，工作代码就是这个代码（简化了一点）：

MGames.GameRoute = Ember.Route.extend ({
    model: function (params) {
        // This is only called when loading the URL directly,
        // not following a link. We load the game, and in the
        // setupController we'll load the boards.
        return MGames.Game.find(params.game_id);
    },
    setupController: function(controller, game) {
        // This is *always* called, so we load the boards
        model = MGames.Board.findAllByGame(game.id);
        controller.set('model', model);
    }
});

Answer 2

您要链接的board路线具有2个动态网段，但您仅提供了一个。 您需要更改为

{{#linkTo 'board' game board}}The board{{/linkTo}}

undefined错误可能是由于ArrayController没有获得棋盘，因为相应的游戏ID正在作为undefined传递。 上述更改也应解决此问题。

使用Ember.js加载单个模型

问题描述

2 个解决方案

解决方案1
4 已采纳 2013-07-04 19:55:11

解决方案2
2 2013-07-04 17:27:26

使用Ember.js加载单个模型

问题描述

2 个解决方案

解决方案1 4 已采纳 2013-07-04 19:55:11

解决方案2 2 2013-07-04 17:27:26

解决方案1
4 已采纳 2013-07-04 19:55:11

解决方案2
2 2013-07-04 17:27:26