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页面时，我只看到{{1直到我刷新导致产品标题出现

Answer 1

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

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

解决方案是：

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

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

拼图的最后一部分在你的路线定义中 - 你使用了param :id，而不是:product_id，这是ember所期望的。将其更改为:product_id，或向ProductsEditRoute添加适当的serialize挂钩

XHR在与Ember过渡时似乎没有开火

1 个答案: