javascript - 使用 Ember.js 加载单个模型-6ren

javascript - 使用 Ember.js 加载单个模型

转载作者：行者123 更新时间：2023-11-29 16:15:10

我正在尝试编写一个非常简单的应用程序:我有一些游戏(比如国际象棋、井字棋……等等)，每个游戏都有几个棋盘。我想显示游戏列表，然后在您单击游戏时显示棋盘列表。

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

游戏列表已正确显示。这里没问题。
当我点击一个游戏时，出现此错误:
Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated game controller):ember237>
但是如果我按 F5 或手动输入 URL，一切正常。我不知道为什么。
更新:我已经看到，如果我更改 games模板，更改 {{#linkTo}}使用手写链接，一切正常:
- 这是无效链接:{{#linkTo 'game' game}}{{game.name}}{{/linkTo}} .它正确地构建了 URL，但是当我点击它时它失败了。
- 这是手写的<a>标签:<a href="#/games/{{unbound game.id}}">{{game.name}}</a> .效果很好。
每个版 block 的 Url 应遵循以下格式:
/games/1/boards/5
但是当我写 {{#linkTo 'board' board}}我得到的是:
/games/undefined/boards/5

这是代码(您可以看到一个“工作”副本 here in 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>

最佳答案

好吧，我终于想通了这个问题。在我的 gameRoute 中，我这样写:

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

当我直接在浏览器栏中写入 URL 时，它起作用了，因为 Ember 调用了 model 函数，但是当遵循 {{#linkTo}} 时，模型是作为参数传递的那个，因此不会调用 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);
    }
});

关于javascript - 使用 Ember.js 加载单个模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17466355/

文章推荐： javascript - 试图理解 js 中的参数

文章推荐： javascript - 将文字值与 Razor 一起插入javascript

c# - Mvvm 模型 View 模型
可不可以命名为MVVM模型？因为View通过查看模型数据。 View 是否应该只与 ViewModelData 交互？我确实在某处读到正确的 MVVM 模型应该在 ViewModel 而不是 Mode
javascript - 模型 -> 观察者 -> View -> Controller -> 模型 ->
我正在阅读有关设计模式的文章，虽然作者们都认为观察者模式很酷，但在设计方面，每个人都在谈论 MVC。我有点困惑，MVC 图不是循环的，代码流具有闭合拓扑不是很自然吗？为什么没有人谈论这种模式: mo
c# - WPF 中的便笺项目。模型、 View 、 View 模型
我正在开发一个 Sticky Notes 项目并在 WPF 中做 UI，显然将 MVVM 作为我的架构设计选择。我正在重新考虑我的模型、 View 和 View 模型应该是什么。我有一个名为 Not
C# 根据模型中的枚举属性将列表<模型> 转换为字典<枚举，列表<模型>>？
不要混淆:How can I convert List to Hashtable in C#? 我有一个模型列表，我想将它们组织成一个哈希表，以枚举作为键，模型列表(具有枚举的值)作为值。 publi
c# - 实体 vs 模型 vs View 模型
我只是花了一些时间阅读这些术语(我不经常使用它们，因为我们没有任何 MVC 应用程序，我通常只说“模型”)，但我觉得根据上下文，这些意味着不同的东西: 实体这很简单，它是数据库中的一行: 2) In
c# - 在大型应用程序中使用 MVVM - 共享 View 模型、模型、状态等
我想知道你们中是否有人知道一些很好的教程来解释大型应用程序的 MVVM。我发现关于 MVVM 的每个教程都只是基础知识解释(如何实现模型、 View 模型和 View )，但我对在应用程序页面之间传递
swift - 清除 Realm 中除一种对象类型(模型)之外的所有对象类型(模型)的方法
我想realm.delete() 我的 Realm 中除了一个模型之外的所有模型。有什么办法可以不列出所有这些吗？也许是一种遍历 Realm 中当前存在的所有类型的方法？最佳答案您可以从您的 R
php - Mocking Laravel Eloquent 模型 - AppServiceProvider 中使用的 Mocking 模型
我正在尝试使用 alias 指令模拟一个 Eloquent 模型，如下所示: $transporter = \Mockery::mock('alias:' . Transporter::class)
R Stargazer 与 pglm 模型 - 在 plm 模型中转换二项式 pglm 模型
我正在使用 stargazer 创建我的 plm 汇总表。 library(plm) library(pglm) data("Unions", package = "pglm") anb1 <- pl
ASP.NET MVC + EF 4.1 分层、模型、 View 模型
我读了几篇与 ASP.NET 分层架构相关的文章和问题，但是读得太多后我有点困惑。 UI 层是在 ASP.NET MVC 中开发的，对于数据访问，我在项目中使用 EF。我想通过一个例子来描述我的问题
ios -/ml 模型/Inception V3.ml 模型 : unable to read document
我收到此消息错误: Inceptionv3.mlmodel: unable to read document 我下载了最新版本的 xcode。 9.4 版测试版 (9Q1004a) 最佳答案您没有
c# - ASP.NET MVC3 Automapper View 模型/模型 View 验证
(同样，一个 MVC 验证问题。我知道，我知道......) 我想使用 AutoMapper ( http://automapper.codeplex.com/ ) 来验证我的创建 View 中不在我
android - 如何使用 sharedview 模型 koin android 注入(inject)具有作用域的 View 模型
需要澄清一件事，现在我正在处理一个流程，其中我有两个 View 模型，一个依赖于另一个 View 模型，为了处理这件事，我尝试在我的基本 Activity 中注入(inject)两个 View 模型，
wpf - 如何在 Window.Resources 标签中使用带有数据绑定(bind)的 View 模型、模型、命令类？
如果 WPF MVVM 应该没有代码，为什么在使用 ICommand 时，是否需要在 Window.xaml.cs 代码中实例化 DataContext 属性？我已经并排观看并关注了 YouTube
asp.net - 模型-存储库-服务-验证器- View - View 模型- Controller 设计模式(？)
当我第一次听说 ASP.NET MVC 时，我认为这意味着应用程序由三个部分组成:模型、 View 和 Controller 。然后我读到 NerdDinner并学习了存储库和 View 模型的方法
python - 如何使用 mmconvert 将 tensorflow 模型(InceptionResnetV2 pb 文件)转换为 pytorch 模型？
Platform : ubuntu 16.04 Python version: 3.5.2 mmdnn version : 0.2.5 Source framework with version :
swift - 在 super.init 初始化 self super.init 之前，在属性访问 'self' 中使用 'model'(品牌 : brand, 模型:模型)
我正在学习本教程:https://www.raywenderlich.com/160728/object-oriented-programming-swift ...并尝试对代码进行一些个人调整，看看
AngularJS 模型
我正试图围绕 AngularJS。我很喜欢它，但一个核心概念似乎在逃避我——模型在哪里？例如，如果我有一个显示多个交易列表的应用程序。一个列表向服务器查询匹配某些条件的分页事务集，另一个列表使用不同
模型、业务规则和持久性
我在为某个应用程序找出最佳方法时遇到了麻烦。我不太习惯取代旧 TLA(三层架构)的新架构，所以这就是我的来源。在为我的应用程序(POCO 类，对吧？？)设计模型和 DAL 时，我有以下疑问: 我的模
Django - 模型 - 如何描述两个模型之间的特定双向关系？
我有两个模型:Person 和 Department。每个人可以在一个部门工作。部门可以由多人管理。我不确定如何在 Django 模型中构建这种关系。这是我不成功的尝试之一 [models.py]:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Ember.js 加载单个模型