EmberJS Direct Slug URL访问不工作 [英] EmberJS Direct Slug URL Access Not Working

问题描述

http://mydomain.com/#/posts/1

到：

http://mydomain.com/#/posts/first-awesome-post

问题是，如果我直接通过直接访问网页（ http： //mydomain.com/#/posts/first-awesome-post ），我得到一个空白页。

这是我有的： / p>

  App.Router.map（function（）{
 this.resource（'posts'，function（）{
 this.resource（'post'，{path：'：post_id'}）; 
}）; 
}）; 
 
 App.Post.FIXTURES = [{
 id：1，
 name：'First Awesome Post'，
 slug：'first-awesome-post'
}]; 
 
 App.PostRoute = Em.Route.extend（{
 model：function（params）{
 return App.Post.find（params.post_id）; 
 } 
 
 setupController：function（controller，model）{
 this._super.apply（this，arguments）; 
}，
 
 serialize： function（model，params）{
 return {post_id：model.get（'slug'）}; 
}，
}）; 
  

我尝试过以下操作：

• 将 App.PostRouter 中的 params.post_id 替换为 params。 post_slug 并输入以下URL到我的浏览器 http：// mydomain .COM /＃/职位/第一真棒-帖子;结果：页面CSS和HTML加载但id＃1的数据没有加载（即模型钩子不被调用）


• 摆脱了序列化功能并输入了以下URL到我的浏览器 http://mydomain.com/#/posts/1 ;结果：一切正常（CSS，HTML和数据完美加载）

我可以知道我在这里做了什么错案件？

我正在使用EmberJS版本1.0.0-rc.6

解决方案

如果你想使用s子，你应该更改模型函数并使用findQuery，因为您正在通过id http://emberjs.com/api/data/classes/DS.Store.html#method_findQuery ，但是这个函数返回一个RecordArray，你可以使用setupController钩子来设置数组的唯一一个对象

  App.Router.map（function（）{
 this.resource（'posts'，function（）{
 this.resource（'post'，{path：'：post_slug'}）; 
}）; 
}）; 
 
 App.Post.FIXTURES = [{
 id：1，
 name：'First Awesome Post'，
 slug：'first-awesome-post'
}]; 
 
 App.PostRoute = Em.Route.extend（{
 model：function（params）{
 return App.Post.findQuery（{slug：params.post_slug}）; 
}，
 setupController：function（controller，model）{
 //如果模型来自一个link-to helper，它将是一个对象，如果它来自路由，它将是一个元素的数组
 if（Ember.isArray（model））{
 controller.set（'model'，model.get（'firstObject'））; 
} 
 else {
 controller.set（'model'，model）; 
} 
}，
 
 serialize：function（model，params）{
 return {post_slug：model.get（'slug'）}; 
}，
}）; 
  

I am using slugged URLs for cleaner URLs to convert from this:

http://mydomain.com/#/posts/1

to this:

http://mydomain.com/#/posts/first-awesome-post

The problem is that, if I were to directly access the page via direct slugged url (http://mydomain.com/#/posts/first-awesome-post), I got a blank page instead.

Here is what I have:

App.Router.map(function() {
    this.resource('posts', function() {
        this.resource('post', { path: ':post_id' });
    });
});

App.Post.FIXTURES = [{
  id: 1,
  name: 'First Awesome Post',
  slug: 'first-awesome-post'
}];

App.PostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.find(params.post_id);
    },

    setupController: function(controller, model) {
        this._super.apply(this, arguments);
    },

    serialize: function(model, params) {
        return { post_id: model.get('slug')};
    },
});

I have tried the following:

• Replaced params.post_id in App.PostRouter to params.post_slug and entered the following URL to my browser http://mydomain.com/#/posts/first-awesome-post; Result: The page CSS and HTML loads but the data of id #1 did not load (i.e. model hook isn't called)
• Got rid of serialize function and entered the following URL to my browser http://mydomain.com/#/posts/1; Result: Everything works fine (CSS, HTML, and data got loaded perfectly)

May I know what I have been doing wrong in this case?

P.S. I am currently using EmberJS version 1.0.0-rc.6

解决方案

If you want to use the slug you should change the model function and make use of findQuery as you are seaching a model by an attribute other than id http://emberjs.com/api/data/classes/DS.Store.html#method_findQuery, but this function returns an RecordArray, you could use the setupController hook for setting the only one object of the array

App.Router.map(function() {
    this.resource('posts', function() {
        this.resource('post', { path: ':post_slug' });
    });
});

App.Post.FIXTURES = [{
  id: 1,
  name: 'First Awesome Post',
  slug: 'first-awesome-post'
}];

App.PostRoute = Em.Route.extend({
    model: function(params) {
        return App.Post.findQuery({slug:params.post_slug});
    },
    setupController: function(controller, model) {
    //If the model comes from a link-to helper it will be an object, if it comes from the route it will be an array of one element
      if(Ember.isArray(model)){
        controller.set('model',model.get('firstObject'));
      }
      else{
        controller.set('model',model);
      }
    },

    serialize: function(model, params) {
        return { post_slug: model.get('slug')};
    },
});

这篇关于EmberJS Direct Slug URL访问不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！