0

したがって、Ember で「foos」というモデルがある場合、data-template-name="foos" のテンプレートが読み込まれますが、「foos」を 1 つ読み込むときに画面から「foos」を消去する方法がわかりません。 " 同様に、@foos などのコントローラーのインスタンス変数で @foos.length を実行する方法もわかりません。他のやりたいことのために。現在、foos.isLoaded を呼び出しても、foo #4 を呼び出しても、ビューは読み込まれません。ページにビューを追加します。ビューを再描画しません。

デフォルトのものがどのように見えるかを理解する方法がわかりません。

私のコントローラーのもの - ルーター

App.Router.map(function(){
    this.resource('records', function(){
        this.resource('record', {path: ':record_id'});
    });
});

App.FoosRoute = Ember.Route.extend({
    model: function() {
        return App.Foo.find();
    }
});

// Controller
App.FoosController = Ember.ArrayController.extend({
    itemController: 'record'
});

App.FooController = Ember.ObjectController.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('middleName') + ' ' + this.get('surname') + ' ' + this.get('suffix')
    }.property('firstName', 'middleName', 'surname', 'suffix')
})

// Model
App.Store = DS.Store.extend({
    revision: 11,
    adapter: 'DS.RESTAdapter'
});


App.Foo = DS.Model.extend({
    firstName: DS.attr('string'),
    middleName: DS.attr('string')
     .....
})

私の見解：

<script type="text/x-handlebars" data-template-name="application">
  {{ outlet }}
</script>


<script type="text/x-handlebars" data-template-name="foos">
  <div class="one_half">
    <h2>Search</h2>
    form here....
  </div>
  <div class="one_half">
    <div id="smallMap">
      map
    </div>
  </div>
  <div id="foos">

    <table>
      <tr>
        <th>Name</th>
        <th>Birth</th>
        <th>Death</th>
      </tr>

      {{#each foo in controller}}
      {{#if foo.isLoaded}}
      <tr>
        <td>{{#linkTo "foo" foo}} {{foo.fullName}} {{/linkTo}}</td>
        <td>{{#linkTo "foo" foo}} {{foo.birthMonth}} {{#if foo.birthMonth}}/{{/if}}{{foo.birthDay}} {{#if foo.birthDay}}/{{/if}}{{foo.birthYear}} {{/linkTo}}</td>
        <td>{{#linkTo "foo" foo}}{{foo.deathMonth}}{{#if foo.deathMonth}}/{{/if}}{{foo.deathDay}}{{#if foo.deathDay}}/{{/if}}{{foo.deathYear}}{{/linkTo}} {{foo.trAlt}}</td>
      </tr>
      {{else}}
      <tr>
        <td colspan="3"  class="loading">Records are loading</td>
      </tr>
      {{/if}}
      {{/each}}
    </table>

  </div>

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="foo">
  <h3>A Record</h3>
  {{id}}
  {{firstName}}
</script>

現在、ビューを強制終了して新しいビューを取り込むことはありません。

4

1 に答える 1

2

うーん、ここでは多くのことが進行中であり、正しい方向に向けようとしています。

したがって、Ember で「foos」というモデルがある場合、data-template-name="foos" のテンプレートがロードされます。

ではない正確に。慣例では同じ名前を使用しますが、ember はモデルに基づくテンプレートをロードしません。どちらかといえば逆です。通常、最善の策は、テンプレートから始めて、モデル レイヤーに戻ることです。この場合、アプリケーション、foo、foos の 3 つのテンプレートから始めましょう。

<script type="text/x-handlebars" data-template-name="application">
  <h1>Foo App</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="foos">
  <h3>All Foos:</h3>
  <ul>
  {{#each controller}}<li>{{fullName}}</li>{{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="foo">
  <h3>Foo Details:</h3>
  <p>{{fullName}}</p>
</script>

ただし、「foo」を1つロードしたときに画面から「foos」を消去する方法がわかりません

Ember は、ルートが変更されたときに適切なビューをレンダリングします。これを可能にする 1 つの方法は、アプリケーションにリンクを追加することです。たとえば、各レコードがリンクになるように foos テンプレートを変更し、詳細ページに [すべて表示] リンクを追加します。

<script type="text/x-handlebars" data-template-name="foos">
  <h3>All Foos:</h3>
  <ul>
  {{#each controller}}
   <li>{{#linkTo "foo" this}}{{fullName}}{{/linkTo}}</li>
  {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="foo">
  <h3>Foo Details:</h3>
  <p>{{fullName}}</p>
  <p>{{#linkTo foos}}Show all{{/linkTo}}</p>
</script>

同様に、 @foos などのコントローラーのインスタンス変数を使用して、他のやりたいことのために @foos.length を実行する方法がわかりません

あなたが何を得ているのかわからない。@foos はインスタンス変数ではありません。ただし、coffeescript を使用していて本当に this.foos を意味する場合を除きます。

現在、foos.isLoaded を呼び出しても、foo #4 を呼び出しても、ビューは読み込まれません。ページにビューを追加します。ビューを再描画しません。

右。foos.isLoaded を呼び出すと、モデルがロードされているかどうかがわかるだけで、ビューとは関係ありません。foo #4 を呼び出すとはどういう意味ですか? SO投稿に含まれていない参照しているコードがあるようです。

デフォルトのものがどのように見えるかを理解する方法がわかりません。

わかった。あなたがやろうとしていることについていくつか推測し、実際の例を作成しました。以下のコード、またはjsbinでこの作業例を参照してください

まず、アプリケーション定義を追加しました。次に、ルートをfoosの代わりに変更しrecordsました。この場合、ネストされたルートも必要ありません。

App = Em.Application.create({});

App.Router.map(function(){
  this.route('foos', {path: '/'});
  this.resource('foo',{path: '/foos/:foo_id'});
});

FooRoute、FoosControllerそのFooControllerままで大丈夫でした。

App.FoosRoute = Ember.Route.extend({
    model: function() {
        return App.Foo.find();
    }
});

// Controller
App.FoosController = Ember.ArrayController.extend({
    itemController: 'foo'
});

App.FooController = Ember.ObjectController.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('middleName') + ' ' + this.get('surname') + ' ' + this.get('suffix');
    }.property('firstName', 'middleName', 'surname', 'suffix')
});

に不足しているプロパティを追加しましたApp.Foo

App.Foo = DS.Model.extend({
    firstName: DS.attr('string'),
    middleName: DS.attr('string'),
    surname: DS.attr('string'),
    suffix: DS.attr('string')
});

API によって返される可能性のあるものをシミュレートするために、4 つのフィクスチャ レコードに切り替えてDS.FixtureAdapter追加しました

App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.FixtureAdapter
});

App.Foo.FIXTURES = [
  {id: 1, firstName: 'Michael', middleName: 'Paul'},
  {id: 2, firstName: 'Jennifer', middleName: 'Lyn'},
  {id: 3, firstName: 'Sophia', middleName: 'Marie'},
  {id: 4, firstName: 'Greta', middleName: 'Fae'}
];
于 2013-02-05T03:07:24.197 に答える