在Ember JS+Ember Data中使用字符串而不是ID的URL

URLs with strings instead of IDs in Ember JS + Ember Data

本文关键字：ID URL 字符串 JS+Ember Ember Data      更新时间：2023-09-26

我正试图创建一个简单的应用程序，其中包含几个动态页面：index、about和contact。我不想在路由器中对路由进行硬编码；用户可以潜在地添加页面而不必编辑路由器。我从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匹配的字符串。这种方法感觉就像是在破坏模型；我认为这不是正确的做法。

如果第二个arg是对象，则find()应始终返回一个数组，因为它随后调用findQuery()。这并不重要，尽管你可以得到第一个，并以新的承诺退货： 
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;
    },
});

serialize只被调用来从模型中获取参数，所以只有在{{link-to 'page'}}

这样的事情上
相关文章：