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）按预期显示所有数据，链接按应有的方式创建，但是当我登陆 /products/ID/edit 页面时，我只看到<h2>edit</h2>直到我刷新导致出现的产品标题

4

1 回答 1

1

ajax 请求未触发有两个原因：

  1. 使用时{{linkTo theRoute theObject}}，model钩子theRoute永远不会被调用，因为您已经拥有要链接到它的对象！相反，路由模型设置为theObject
  2. 即使调用了模型钩子并调用了App.Product.find(params.id);，它也会返回原始对象，因为您已将其加载到数据存储中App.Product.find()。

解决方案是：

  1. 返回列表操作中的所有数据，而不仅仅是名称和 ID。您从 /products 返回的列表应该包含您从 /products/1、products/2 等获得的每个项目的所有数据，都在一个大列表中
  2. 使用相关模型，例如ProductData，并在需要时使用关系加载产品数据。

考虑到这一点，你{{linkTo}}应该只是product而不是product.id在其中。

难题的最后一部分是在您的路线定义中 - 您使用了 param :id，而不是:product_idember 所期望的。要么把它改成:product_id，要么给你的 ProductsEditRoute 添加一个合适的serialize钩子

于 2013-06-14T15:41:41.327 回答