javascript - Ember JS + Ember Data 中使用字符串代替 ID 的 URL

Question

我正在尝试创建一个包含多个动态页面的简单应用程序:索引、关于和联系方式。我不想在路由器中对路由进行硬编码；用户可以添加页面而无需编辑路由器。我从 Ember-cli 开始。

我在网上找到了一个教程，简要介绍了此任务:http://mavilein.github.io/javascript/2013/09/28/three-steps-to-ember-js-seo-friendly-urls/ 。不幸的是，当我将它与 Ember Data 一起使用时，我遇到了两个主要问题:

1. this.store.find("page", params["page_id"]); 返回 san 数组，而不是对象。它确实不是为检索单个对象而设计的。

2. Route 上的 serialize 函数永远不会被调用。

适配器

import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
    queryFixtures: function(fixtures, query, type) {
        var key = Ember.keys(query)[0];
        return fixtures.filterBy(key, query[key]); //This must be an array, not an object.
    }
});

型号

import DS from "ember-data";

var Page = DS.Model.extend({
    title: DS.attr(),
    body: DS.attr()
});

Page.reopenClass({
    FIXTURES: [
        {
            id: 1,
            title: "Contact",
            body: "Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.",
            path: "contact"
        },{
            id: 2,
            title: "About",
            body: "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.",
            path: "about"
        }
    ]
});

export default Page;

路由器

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.resource("page", {"path": "/:page_id"});
});

export default Router;

路线(页面)

import Ember from "ember";

export default Ember.Route.extend({
    model: function(params) {
        return this.store.find("page", {"path": params["page_id"]});
    },
    serialize: function() {
        alert("serialize"); //is never called
    }
});

模板

{{title}} //Must be wrapped in {{#each}} in order to loop through the array of a single object

我实际完成这项工作的唯一方法是将整数id更改为与URL匹配的字符串。这种方法感觉像是在破坏模型；我认为这不是正确的方法。

Answer 1

如果第二个参数是对象，

find() 应始终返回一个数组，因为它随后会调用 findQuery()。尽管您可以获取第一个并在新的 promise 中返回它，但这并不重要:

export default Ember.Route.extend({
    model: function(params) {
        var query = this.store.find("page", { path: params.page_id });

        var promise = new Ember.RSVP.Promise(function(resolve, reject) {
           query.then(function(result) {
               resolve(result.get('firstObject'));
           },
           function(err) {
               reject(err);
           });
        });
        return promise;
    },
});

仅调用序列化来从模型获取参数，因此仅在 {{link-to 'page'}}

之类的情况下调用