1

Laravel で作成した API を使用した基本的な Ember アプリ。すべての製品を表示するインデックス ページがあり、編集リンクを生成します。編集リンクにアクセスすると、モデルからデータが返されません。コンソールを見ると、XHR リクエストが行われていないようです。強制的に更新すると、XHR が起動し、データが表示されます。

// Init App
App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    rootElement: '#myapp-ember'
});

// Declare routes
App.Router.map(function(){
    this.resource("products",function(){
        this.route('new');
        this.route("edit", { path: "/:id/edit" });
    });
});

// Model 
App.Product = DS.Model.extend({
    title: DS.attr('string'),
    brand: DS.attr('string'),
    category: DS.attr('string'),
    type: DS.attr('string')
});

// Declare Data Store so Ember knows we're using Ember Data to handle our Model
App.Store = DS.Store.extend({
    revision: 11
});

// set our API namespace
DS.RESTAdapter.reopen({
    namespace: 'api/v1'
});

// forward from "/" to "/products"
App.IndexRoute = Ember.Route.extend({
    redirect: function(){
        this.transitionTo('products');
    }
});

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

App.ProductsEditRoute = Ember.Route.extend({
    model: function(params){
        return App.Product.find(params.id);
    }
});

メインの HTML ファイルは次のとおりです。

<script type="text/x-handlebars" data-template-name="products">
    <h3>All Products 
    {{#linkTo "products.new" classNames="btn btn-small pull-right"}}<i class="icon-plus"></i> Add Product{{/linkTo}}
    </h3>
    {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="products/index">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Brand</th>
                <th>Category</th>               
                <th>Type</th>
                <th width="100">Actions</th>
            </tr>
        </thead>

        <tbody>
        {{#each product in controller }}
            <tr>
                <td>{{product.title}}</td>
                <td>{{product.brand}}</td>
                <td>{{product.category}}</td>
                <td>{{product.type}}</td>
                <td>
                    {{#linkTo "products.edit" product.id classNames="btn btn-small pull-info"}}edit{{/linkTo}}
                </td>
            </tr>
        {{/each}}        
        </tbody>
    </table>
</script>

<script type="text/x-handlebars" data-template-name="products/new">
    <h2>new</h2>
</script>

<script type="text/x-handlebars" data-template-name="products/edit">
    <h2>edit</h2>
    {{ title }}
</script>

私が言ったように、インデックス ページ (/products にリダイレクトする) は期待どおりにすべてのデータを表示しています<h2>edit</h2>。表示される商品タイトル

4

1 に答える 1

1

ajax リクエストが起動しない理由は 2 つあります。

  1. を使用する場合、リンクするオブジェクトが既にあるため{{linkTo theRoute theObject}}、modelフック onが呼び出されることはありません。theRoute代わりに、ルート モデルは次のように設定されます。theObject
  2. モデル フックが呼び出されて が呼び出されたとしてもApp.Product.find(params.id);、元のオブジェクトが返されますApp.Product.find()。

解決策は次のいずれかです。

  1. name や id などだけでなく、list アクション内のすべてのデータを返します。/products から返されるリストには、/products/1、products/2 などから取得する各アイテムのすべてのデータがすべて大きなリストに含まれている必要があります。
  2. などの関連モデルをProductData使用し、必要に応じて関連を使用して製品データを読み込みます。

これを念頭に置いて、あなたはそれの代わりに{{linkTo}}ちょうど持っているべきです.productproduct.id

パズルの最後のピースはルート定義にあります。ember が期待する:id代わりに、 param を使用しています。:product_idに変更するか、 ProductsEditRoute に:product_id適切なフックを追加してくださいserialize

于 2013-06-14T15:41:41.327 に答える