javascript - XHR 似乎不会在与 Ember 的转换时触发

Question

使用我在 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>直到我刷新，导致出现产品标题

Answer 1

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

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

解决方案是:

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

考虑到这一点，您的 {{linkTo}} 中应该只有 product 而不是 product.id。

最后一个难题在于您的路线定义中 - 您使用了参数 :id，而不是 ember 所期望的 :product_id。将其更改为 :product_id，或者向您的 ProductsEditRoute 添加适当的 serialize Hook