在让我的余烬路由工作时遇到一些麻烦，如果我做得对，我有点困惑。似乎这部分有很多变化，这可能有点令人困惑。我希望有人能帮助我看看这里出了什么问题。
应用
refset.sparklingideas.co.uk:8000
环境
克隆的余烬应用套件于2013年11月20日
Ember : 1.2.0-beta.4
Ember Data : 1.0.0-beta.2
Handlebars : 1.1.2
Query : 1.9.1
Node : v0.10.21
Chrome : 31.0.1650.16 beta
OS X : Maverick
所有源代码均可在此处获得：
https://github.com/sparkling/snomed-refset
抱歉，还没有运气托管它，但我确实有屏幕截图来说明：
http://goo.gl/DGBSvf
问题
我当前的配置有两个问题。
当单击链接以返回到主屏幕(/， "refsets"( 时，子屏幕的内容 (/:p ublicid( 将附加到主屏幕的底部。当您来回导航时，这会不断堆叠。
当单击"显示规则"或"显示概念"按钮的链接时，屏幕变为空白，Ember返回此神秘错误(还提供了其他自定义和Ember日志记录详细信息(：
Loading concepts in router ember.js:3227 GETing concepts for: {...} ember.js:3227 Rendering refset.concepts with default view <appkit@view:default::ember404> Object {fullName: "view:refset.concepts"} ember.js:3227 Transitioned into 'refset.concepts' ember.js:3227 Uncaught TypeError: Cannot read property 'parentNode' of null ember.js:24102 Assertion failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications. ember.js:3227 Uncaught Error: You cannot modify child views while in the inBuffer state ember.js:22892
这些有问题的"链接到"语句位于：
- 在"template/refset.hbs"(痕迹导航，顶部(中：导致内容堆叠 在"template/refset/concept.hbs">
- 和"template/refset/plan.hbs"(标题，顶部(中：导致余烬错误
来源可以在上面的链接中找到，也可以在下面复制。
源
路线
var Router = Ember.Router.extend();
Router.map(function() {
this.resource('refsets', {path:'/'});
this.resource('create', {path:'/create'}, function(){});
this.resource('refset', {path:'/:publicId'}, function(){
this.route('concepts', {path:'/'});
this.route('plan', {path:'plan'});
});
});
Router.reopen({
location: 'history'
});
export default Router;
template/refset/concepts.hbs
<secion id="concepts">
<h2>Concepts
{{#link-to 'refset.plan' refset}}<button class="toggle btn btn-sm btn-default">Show Rules</button>{{/link-to}}
</h2>
<table id="forums" class="table table-striped">
<thead>
<th>Title</th>
<th>Id</th>
<th>Effective on</th>
<thead>
<tbody>
{{#each concept in controller}}
<tr>
<td><a {{bind-attr href=concept.href}} target="_blank">{{concept.title}}</a></td>
<td>{{concept.id}}</td>
<td>{{date-format concept.effectiveTime}}</td>
</tr>
{{/each}}
</tbody>
</table>
</section>^0k334q5PK3Wcn#p^4CS#
template/refset/plan.hbs
<secion id="plan">
<h2>Plan
{{#link-to 'refset.concepts' refset}}<button class="toggle btn btn-sm btn-default">Show Concepts</button>{{/link-to}}
</h2>
<ul class="list-group">
{{#each rule in rules}}
<li class="list-group-item">
{{show-rule rule}}
</li>
{{/each}}
</ul>
<div class="terminal">Terminal: {{terminal}}</div>
</section>
template/refset.hbs
<ol class="breadcrumb">
<li>{{#link-to 'refsets'}}Refsets{{/link-to}}</li>
<li class="active">{{title}}</li>
</ol>
<h1>{{title}}</h1>
<section id="details">
{{outlet details}}
<section id="details">
控制器/引用集/概念.js
export default Ember.ArrayController.extend({
conceptsResponse: 'concepts-response-not-set',
needs: "refset",
refset: Ember.computed.alias("controllers.refset.model")
});
控制器/引用集/计划.js
export default Ember.ObjectController.extend({
planResponse: 'plan-response-not-set',
needs: "refset",
refset: Ember.computed.alias("controllers.refset")
});
控制器/引用集.js
export default Ember.ObjectController.extend({});
路线/参考集/概念.js
import Refset from 'appkit/models/refset';
export default Ember.Route.extend({
model: function() {
Ember.Logger.log('Loading concepts in router');
return Refset.getConcepts(this.modelFor('refset'), this);
},
renderTemplate: function(){
this.render({outlet:'details'});
}
});
路线/参考集/计划.js
import Refset from 'appkit/models/refset';
export default Ember.Route.extend({
model: function() {
Ember.Logger.log('Loading plan in router');
return Refset.getPlan(this.modelFor('refset'), this);
},
renderTemplate: function(){
this.render({outlet:'details'});
}
});
路线/参考集.js
import Refset from 'appkit/models/refset';
export default Ember.Route.extend({
model: function(args) {
return Refset.loadRefset(args.publicId, this);
}
});
JSON AJAX 响应
计划/规则
{
"id":25,
"terminal":67,
"rules":[
{
"id":65,
"type":"LIST",
"left":null,
"right":null,
"concepts":[
{
"id":321987003,
"title":"Citalopram 20mg tablet (product)",
"active":false,
"effectiveTime":0
},
{
"id":441519008,
"title":"Contusion of infraorbital nerve (disorder)",
"active":false,
"effectiveTime":0
},
{
"id":17783003,
"title":"Car sickness (finding)",
"active":false,
"effectiveTime":0
},
{
"id":128665000,
"title":"Pituitary carcinoma (morphologic abnormality)",
"active":false,
"effectiveTime":0
}
]
},
{
"id":66,
"type":"LIST",
"left":null,
"right":null,
"concepts":[
{
"id":254597002,
"title":"Oleogranuloma of intestine (disorder)",
"active":false,
"effectiveTime":0
},
{
"id":412398008,
"title":"Griseofulvin microsize (product)",
"active":false,
"effectiveTime":0
},
{
"id":118831003,
"title":"Procedure on intestine (procedure)",
"active":false,
"effectiveTime":0
}
]
},
{
"id":67,
"type":"UNION",
"left":65,
"right":66,
"concepts":[
]
}
]
}
概念
{
"concepts":[
{
"id":321987003,
"href":"http://browser.snomedtools.com/version/1/concept/xml/321987003",
"serialisedId":0,
"title":"Citalopram 20mg tablet (product)",
"effectiveTime":20020131,
"active":true
},
{
"id":441519008,
"href":"http://browser.snomedtools.com/version/1/concept/xml/441519008",
"serialisedId":0,
"title":"Contusion of infraorbital nerve (disorder)",
"effectiveTime":20090731,
"active":true
},
{
"id":17783003,
"href":"http://browser.snomedtools.com/version/1/concept/xml/17783003",
"serialisedId":0,
"title":"Car sickness (finding)",
"effectiveTime":20020131,
"active":true
},
{
"id":128665000,
"href":"http://browser.snomedtools.com/version/1/concept/xml/128665000",
"serialisedId":0,
"title":"Pituitary carcinoma (morphologic abnormality)",
"effectiveTime":20020131,
"active":true
},
{
"id":254597002,
"href":"http://browser.snomedtools.com/version/1/concept/xml/254597002",
"serialisedId":0,
"title":"Oleogranuloma of intestine (disorder)",
"effectiveTime":20020131,
"active":true
},
{
"id":412398008,
"href":"http://browser.snomedtools.com/version/1/concept/xml/412398008",
"serialisedId":0,
"title":"Griseofulvin microsize (product)",
"effectiveTime":20040731,
"active":true
},
{
"id":118831003,
"href":"http://browser.snomedtools.com/version/1/concept/xml/118831003",
"serialisedId":0,
"title":"Procedure on intestine (procedure)",
"effectiveTime":20020131,
"active":true
}
]
}
引用集
[
{
"id":41,
"concept":{
"id":2189000,
"href":"http://browser.snomedtools.com/version/1/concept/xml/2189000",
"serialisedId":0,
"title":"Hemoglobin F-Dammam (substance)",
"effectiveTime":20020131,
"active":true
},
"publicId":"ffff",
"title":"fffff",
"description":"ffffff",
"created":"2013-11-24",
"lastModified":"2013-11-24"
},
{
"id":44,
"concept":{
"id":27089009,
"href":"http://browser.snomedtools.com/version/1/concept/xml/27089009",
"serialisedId":0,
"title":"Blood group antibody Ce (substance)",
"effectiveTime":20020131,
"active":true
},
"publicId":"qqqqqqqqqqq",
"title":"qqqqqqq",
"description":"qqqqqqq",
"created":"2013-11-25",
"lastModified":"2013-11-25"
},
{
"id":23,
"concept":{
"id":21304000,
"href":"http://browser.snomedtools.com/version/1/concept/xml/21304000",
"serialisedId":0,
"title":"Hemoglobin A,c (substance)",
"effectiveTime":20020131,
"active":false
},
"publicId":"sdsdawaesf",
"title":"sdsdsdsd",
"description":"sdsdsdsd",
"created":"2013-10-10",
"lastModified":"2013-10-10"
},
{
"id":21,
"concept":{
"id":2156000,
"href":"http://browser.snomedtools.com/version/1/concept/xml/2156000",
"serialisedId":0,
"title":"Glial cell (cell)",
"effectiveTime":20020131,
"active":true
},
"publicId":"heyho",
"title":"This is a sample refset",
"description":"and I am a sample description",
"created":"2013-10-09",
"lastModified":"2013-10-09"
}
]
助手
显示规则
export default Ember.Handlebars.makeBoundHelper(function(rule) {
if (rule.get('type') === 'LIST'){
return new window.Handlebars.SafeString("<span style="color: lightgrey">" + rule.get('id') + "</span> <strong>List</strong> <span style="padding-left: 0.5em;color:grey">[" + rule.get('concepts').length + "]</span>");
}
else if (rule.get('type') === 'UNION'){
return new window.Handlebars.SafeString("<span style="color: lightgrey">" + rule.get('id') + "</span> <strong></strong>Rule " + rule.get('left') + " <strong>Union</strong> Rule " + rule.get('right'));
}
else if (rule.get('type') === 'DIFFERENCE'){
return new window.Handlebars.SafeString("<span style="color: lightgrey">" + rule.get('id') + "</span> <strong></strong>Rule " + rule.get('left') + " <strong>Difference</strong> Rule " + rule.get('right'));
}
else if (rule.get('type') === 'SYMMETRIC'){
return new window.Handlebars.SafeString("<span style="color: lightgrey">" + rule.get('id') + "</span> <strong></strong>Rule " + rule.get('left') + " <strong>Symmetric Difference</strong> Rule " + rule.get('right'));
}
else if (rule.get('type') === 'INTERSECTION'){
return new window.Handlebars.SafeString("<span style="color: lightgrey">" + rule.get('id') + "</span> <strong></strong>Rule " + rule.get('left') + " <strong>Intersection</strong> Rule " + rule.get('right'));
}
});
大多数时候我看到这与无效的 HTML、不匹配的div/部分等有关。
<section id="details">
{{outlet details}}
<section id="details">
应该是
<section id="details">
{{outlet details}}
</section>
在plan.hbs中，section被错误地拼写为secion。
此外，使用/作为概念路径似乎令人困惑余烬，它认为末尾带有/的 url 仍然只是 refset(不是概念(
Router.map(function() {
this.resource('refsets', {path:'/'});
this.resource('create', {path:'/create'}, function(){});
this.resource('refset', {path:'/:publicId'}, function(){
this.route('concepts', {path:'concepts'});
this.route('plan', {path:'plan'});
});
});