1

ルートの動的セグメントに苦労しています。これが私のコードです

        App.Router.map(function(){
        this.resource('stuff', {path: '/stuff/:stuff_id'}, function() {
          this.route('make');
          this.route('edit');
          this.route('delete');
          this.route('history');
          });
        });

        App.StuffRoute = Ember.Route.extend({
            model: function(param) {
            },
        setupController: function (){
            },
            renderTemplate: function() {
            }
        });

       App.StuffView= Ember.View.extend({
         defaultTemplate: Ember.Handlebars.compile(stuffTemplate)
       });

       App.StuffController = Ember.Controller.extend();

エラーが発生しないStaffRouteようにするには、モデルに何を入れればよいですか? 動的セグメント部分を適切に設定するにはどうすればよいですかNo route matched the URL 'crisis'? localhost/#stuff残り火のドキュメントに関する私の唯一の問題は、すべての例が生産準備ができていない残り火データを使用しており、私はそれを使用したくないということです。

4

2 に答える 2

1

ember-data がなければ、通常model、ルート上のメソッド内に jQuery を使用して直接 getJSON を配置します。メソッドはmodelpromise をサポートしているため、jQuery promise を再利用できます。

たとえば/images/tag、Flickr API を使用してルートの画像のリストをロードするルートを指定すると、次のようになります。

App.Router.map(function() {
  this.resource('images', { path: '/images/:tag'});
});

App.ImagesRoute = Ember.Route.extend({
  model: function(params) {
    flickerAPI = 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
    console.log('ImagesRoute.model', params);

    return jQuery.getJSON( flickerAPI, {
      tags: params.tag,
      tagmode: 'any',
      format: "json"
    })
    .then(function(data) {
      console.log('loaded images', data);
      return data;
    })
    .then(null, function() { console.log('failed to load images'); });
  }
});

対応するコントローラーは、返された json のプロパティに自動的にアクセス/バインドできます。または、計算されたいくつかのプロパティにエイリアスを設定できます。

App.ImagesController = Ember.ObjectController.extend({
  images: function() {
    return this.get('model').items;
  }.property('controller'),
  title: function() {
    return this.get('model').title;
  }.property('images')
});

そして、これらのプロパティを使用してハンドルバーを介してレンダリングします。

<script type='text/x-handlebars' data-template-name='images'>
<h1>{{title}}</h1>
{{#each image in images}}
  <img {{bindAttr src='image.media.m'}} />
{{/each}}
</script>

これを行うjsbin の例を次に示します。

于 2013-06-24T14:29:52.970 に答える