ember.js - 「addArrayObserver」または「removeArrayObserver」はありません

Question

データベーステーブルの管理に役立つ管理インターフェイスをモデル化しています。[DbxTables, DbxColumns] の 2 つのモデルがあります。ユーザーが Boostrap のタブメニューを使用してテーブルを選択し、そのテーブルの列を表示できるようにしたいと考えています。これはほとんど機能します。たとえば、「http://my.domain.com/index.html#/performancewhere performanceis the name of table 」と入力すると、次のようになります。

性能表

たとえば、URL を操作して別のテーブルに移動するとhttp://my.domain.com/index.html#/food、右側のペインの食品列に正常に切り替わります。左側のタブメニューで {{linkTo}} リンクを使用すると、問題が発生します。次の 2 つのいずれかが発生します。

{{linkTo}} が次のように見える場合{{linkTo 'columns' this}}、URL パラメーター<App.DbxTable:ember371:performance>は単なるものではなく、performance
{{linkTo}} が次のように見える場合{{linkTo 'columns' this.id}}、ULR パラメータが正しく設定されます (または、少なくとも URL ウィンドウに表示されます) が、左側のタブメニューで [食事] をクリックすると、次のエラーが表示されます。 :オブジェクトの食事にはメソッド「addArrayObserver」がありません。他の何かをクリックすると、「オブジェクトの食事にはメソッド 'removeArrayObserver' がありません」というエラーメッセージが表示されます。

上記のどちらの場合でも、エラーを受け取った後、右側の列名は更新されません。{{linkTo}} の最初のスタイルは、Tom Dale のスクリーンキャストが正しい構文であると示唆しているように見えたものです。this.idしかし、リンクが外れているのを見て、私はアプローチを思いつきました。どんな助けでも大歓迎です。

追加のコードコンテキスト (router.js) の場合:

App.Router.map(function() {
    this.resource('about');
    this.resource('dbx', function() {
        this.resource('columns', { path: ':dbx_table'});
    });
    this.resource('oauth');
    this.resource('postTypeMappings');
});

App.DbxRoute = Ember.Route.extend({
    model: function() {
        return App.DbxTable.find();
    }
});
App.ColumnsRoute = Ember.Route.extend({
    model: function(table) {
        return App.DbxColumn.find(table);
    }
});

モデル: dbx_table.js

App.DbxTable = DS.Model.extend({
    name: DS.attr("string"),
    desc: DS.attr("string"),
    db_column: DS.attr("string"),
    columns: DS.attr("raw")
});

モデル: dbx_column.js

App.DbxColumn = DS.Model.extend({
    name: DS.attr("string"),
    dbType: DS.attr("string"),
    insight: DS.attr("string"),
    enum: DS.attr("string"),
    staticUom: DS.attr("string"),
    uomContext: DS.attr("string"),
    jsonStruct: DS.attr("string"),
    desc: DS.attr("string")
});

モデル: store.js

App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.RESTAdapter.reopen({
        namespace: 'api/lifegadget'
    })
});

DS.RESTAdapter.registerTransform('raw', {
    deserialize: function(serialized) {
        return serialized;
    },  
    serialize: function(deserialized) {
        return deserialized;
    }
});

更新 (ハンドルバーの追加):

もう少し詳細を提供するために。ハンドルバーのテンプレートは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Admin</a>
        <ul class="nav">
            <li>{{#linkTo "dbx"}}DBX{{/linkTo}}</li>
            <li>{{#linkTo "postTypeMappings"}}Post Mappings{{/linkTo}}</li>
            <li>{{#linkTo "oauth"}}OAuth{{/linkTo}}</li>
            <li>{{#linkTo "about"}}About{{/linkTo}}</li>
        </ul>
      </div>
    </div>
    <div id="outlet-target">
    {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" id="about">
  <div class='about'>
      Admin Screen
  </div>
  </script>

  <script type="text/x-handlebars" id="dbx">
  <div class='dbx'>
  <div id="dbx-table-pane" class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        {{#each model}}
            <li>
                {{#linkTo "columns" this}}{{db_column}}{{/linkTo}}
            </li>
        {{/each}}
        <li id="add-table">
            <a href="#section-add-table" data-toggle="tab"><em>Add DBX Table</em></a>
        </li>       
    </ul>
    <div id="dbx-main" class="tab-content">
    {{outlet}}
    </div
  </div>

  </script>

  <script type="text/x-handlebars" id="columns">
      The columns are:
      <ul>
        {{#each model}}
        <li>{{name}}</li>
        {{/each}}
      </ul>
  </script> 

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
  <script src="js/libs/ember-1.0.0-rc.2.js"></script>
  <script src="js/libs/ember-data-12.js"></script>
  <script src="js/app.js"></script>
  <script src="js/router.js"></script>
  <script src="js/models/store.js"></script>
  <script src="js/models/dbx_table.js"></script>
  <script src="js/models/dbx_column.js"></script>

</body>
</html>

更新 2:

問題を示す短いビデオを追加しました: https://vimeo.com/63388787

score 1 · Accepted Answer

これは次の質問に似ています: How to show the string value of a non id field for a model in an ember.js route?

モデルを URL 動的セグメントに変換する方法を定義するには、のserializeフックを使用する必要があると思います。ColumnsRoute

App.ColumnsRoute = Ember.Route.extend({
    model: function(table) {
        return App.DbxColumn.find(table);
    },
    //dbx_table matches the dynamic route name in your router, and I am assuming
    // you want to use the DbxColumn.name as the URL parameter
    serialize: function(model) {
      return {dbx_table: model.get('name')}; 
    }
});

modelフックは、URL が直接ナビゲートされたときに URL をモデルオブジェクトに変換する処理を行います。フックは、またはが使用さserializeれる場合など、ルートが既存のオブジェクトを使用するように遷移するときに URL を構築するために使用されます。transitionTo{{#linkTo}}

ember.js - 「addArrayObserver」または「removeArrayObserver」はありません

1 に答える 1

Related

Reference