“动态段”在Ember.js？ [英] "Dynamic segment" in Ember.js?

问题描述

在整个Ember.js文档中，我们发现在几个地方。这是什么意思？

解决方案

使用适当的示例进行更新：演示 | 来源

由于评论中的问题：

在Ember中，将 Router 机制视为状态机：每个路线可以看作是一个州。有时候，一个国家可以拥有它自己的小国有机器。这样说：一个资源是一个你有可能的小孩状态的状态。可以将 PersonRoute 定义为资源我们的路由在< Application> .Router.map 回调;这真的取决于你的最终目标。例如，如果我们考虑基于人员模型的人员列表的资源，我们可能会有一个列出所有记录的路由。

  App.Router.map（function（）{
 this.resource（'people'）; 
}）; 
  

使用此地图，我告诉我的应用程序需要一个人模板（也可能是一个视图），一个人控制人和一条人路。一个资源也被假设有一个索引路由，这是隐含的，你不需要编码，但如果需要，它将是 PeopleIndexRoute ，之后资源本身的名称，按照惯例。

现在我可以（a）创建一个人路线在人们资源成为个人记录的单一状态;或者（b）我可以在个人资源下创建一个个人资源，所以我可以在 person resource（edit，detail，delete）;或者（c）我可以为个人创建一个单独的资源，如果我想要使用路径来覆盖该URL。

我有时候选择c： p>

  App.Router.map（function（）{
 this.resource（'people'）; 
 this .resource（'person'，{path：'person /：person_id'}，function（）{
 this.route（'edit'）; 
 this.route（'delete'）; 
}）; 
}）; 
  

这是有道理的，编辑是路由因为它没有子国家，只有兄弟姐妹（删除）和父母（个人）。记录的网址将是这样的：〜/＃/ person / 3 / edit ）。

当没有定义为资源时，路由不会有任何子路由/状态，所以你没有person.edit.index像你有人换句话说，路线没有孩子，只有兄弟姐妹和资源才能同时拥有。

现在，路由指南是我们关于这个的最坚实的文档。我强烈推荐它。

---

动态段是路由URL的一部分，根据正在使用的资源进行更改。考虑以下内容：

  App.Router.map（function（）{
 this.resource（'products' function（）{
 this.route（'product'，{path：'：product_id'}）
} 
}）; 
  pre> 
 
 
在上面的stub中，这行：
 资源（'products'，function（）{
  
将产生url 
 
 
〜/＃/ products 
 
 
，以下行将产生
 
 
〜/＃/ products /：product_id 
 
 
替换动态部分，你可以有这样的URL 
 
 
〜/＃/ products / 3 
 
 
 ：product_id 是什么使此路由动态路由器将序列化资源的id（for例如一个产品模型）到URL，它也使用该ID到 find  a  DS.Store 中的模型。你会经常看到这样的路线，如下所示：
  App.ProductRoute = Em.Route.extend（{
 model：function（params）{
 return App.Product.find（params.product_id）; 
} 
}）; 
  
所以在这个例子中，如果你访问〜/＃/ products / 3 ，然后应用程式会尝试从商店载入产品型号的实例，或尝试从后端API中取出。
 
 
 
您可以看到一个小提琴，说明了 here  | 源自这里 
 
 
 
我也推荐这个 Tom Dale的屏幕录像，在那里他建立了一个博客阅读器应用程序Ember.js使用路由器和ember-data API根据URL的动态部分加载博客记录。
 
Throughout the Ember.js documentation, one finds the concept of dynamic segment mentioned at several places. What does it mean?
解决方案
Updating with a proper sample: Demo | Source

Edit due to questions in comments:

In Ember, think of the Router mechanism as a State Machine: Each Route can be seen as a State. Sometimes tho, a state can have it's own little state machine within it. With that said: A resource is a state which you have possible child states. A PersonRoute can be defined as either as a resource our a route in the <Application>.Router.map callback; it really depends on your end goal. For example, if we think of a resource for a list of people based on a person model, we would potentially have a route to list all records. 
App.Router.map(function() {
    this.resource('people');
});
With this map, I'm telling my app that it needs a people template (and maybe a view), a people controller and a people route. A resource is also assumed to have a index route, which is implied and you don't have to code it, but if you need to, it would be PeopleIndexRoute, after the name of the resource itself, by convention.

Now I can (a) create a person route under people resource to be a single state of a person record; or (b) I can create a person resource under the people resource, so I would have more options under person resource (edit, detail, delete); or (c) I could create a separate resource for person, and use the path to override the url if I want to.

I sometimes go for option c:
App.Router.map(function() {
    this.resource('people');
    this.resource('person', {path: 'person/:person_id'}, function() {
        this.route('edit');
        this.route('delete');
    });
});
That would make sense that edit is route since it doesn't have child states , only siblings (delete) and a parent (person). The url for a record would be something like this: ~/#/person/3/edit). 

The routes, when not defined as a resource, won't have any child route/state, so you don't have person.edit.index like you have person.index, in other words, routes don't have child, only siblings and resources can have both.

Right now, the Routing Guide is the most solid piece of documentation we have about this. I strongly recommend it.



Dynamic Segment is a part of a route URL which changes according to the resource in use. Consider the following: 
App.Router.map(function() {
    this.resource('products', function() {
        this.route('product', { path: ':product_id' })
    }
});
In the stub above, the line:
this.resource('products', function() {
will produce the url

  
~/#/products
and the following line will produce 

  
~/#/products/:product_id 
replacing the dynamic part, you could have an url like this

  
~/#/products/3
the :product_id is what makes this route dynamic. The router will serialize the id of a resource (for example a Product model) to the URL and it also uses that id to find the a model in your DS.Store. You'll often see this in routes like the following:
App.ProductRoute = Em.Route.extend({
    model: function(params) {
        return App.Product.find(params.product_id);
    }
});
So for this example, if you access ~/#/products/3, the app will then try to load an instance of the Product model from your store or try to fetch from your backend API.

You can see a fiddle that illustrates that here | source here

I also recommend this screencast by Tom Dale where he builds a blog reader app with Ember.js using the router and the ember-data API to load blog records based on the dynamic part of the URL.

                        
这篇关于“动态段”在Ember.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！