Ember 链接引发错误/未按预期清除屏幕答案

【问题标题】：Ember link-to throws error / does not clear screen as expectedEmber 链接引发错误/未按预期清除屏幕
【发布时间】：2013-11-25 22:40:24
【问题描述】：

在让我的 ember 路由正常工作时遇到了一些麻烦，如果我做得对，我会有点困惑。似乎这部分有很多变化，这可能有点令人困惑。我希望有人能帮我看看这里出了什么问题。

应用

refset.sparklingideas.co.uk:8000

环境

2013 年 11 月 20 日克隆的 Ember 应用套件

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”）时，子屏幕的内容 (/:publicid) 会被添加到主屏幕的底部。当您来回导航时，它会不断堆积。

当单击“显示规则”或“显示概念”按钮的链接时，屏幕变为空白，并且 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

这些有问题的“链接到”语句位于：

在“模板/refset.hbs”（面包屑，顶部）中：导致内容堆叠
在“template/refset/concept.hbs”和“template/refset/plan.hbs”中（标题，顶部）：导致 ember 错误

来源可以在上面的链接中找到，也可以在下面复制。

来源

路线

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;

模板/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#

模板/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>

模板/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">

controllers/refset/concepts.js

export default Ember.ArrayController.extend({
  conceptsResponse: 'concepts-response-not-set',
  needs: "refset",
  refset: Ember.computed.alias("controllers.refset.model")
});

控制器/refset/plan.js

export default Ember.ObjectController.extend({
  planResponse: 'plan-response-not-set',
  needs: "refset",
  refset: Ember.computed.alias("controllers.refset")
});

控制器/refset.js

export default Ember.ObjectController.extend({});

routes/refset/concepts.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'});
  }
});

routes/refset/plan.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'});
  }  
});

路由/refset.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
    }
  ]
}

Refsets

[
  {
    "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>&nbsp;&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;&nbsp; <strong></strong>Rule " + rule.get('left') + " <strong>Intersection</strong> Rule " + rule.get('right'));
  }
});

【问题讨论】：

您介意给我们一个从您的模型挂钩返回的 json/model 的示例，以便我们可以构建一个示例并找出无法正常工作的地方吗？我有一种预感，它与您覆盖的 renderTemplate 和命名的网点有关，但我只是在猜测。
嗨 kingpin2k，我很抱歉之前遗漏了这个。我真的很感谢你的帮助。我已经编辑了帖子，并添加了相关的 rest api 响应。希望这可以帮助。在将应用程序托管（Java 恐龙，节点 newb）时遇到一些问题，但如果从 Github 克隆它应该使用“grunt server”运行（当然，Web 服务 api 不存在。doh）。
删除了命名的网点，还是一样
刚刚遇到以下错误之一：Uncaught Error: You cannot modify child views while in the inBuffer state ，这是一个非常具有误导性的错误。对我来说，这是因为 Handlebars 模板输出了一个（微妙的）格式错误的 HTML 片段。我知道这个问题在不久前就得到了回答，但我只需要发泄一下——我不会在过去几个小时里追着那该死的东西回来！错误消息让我在控制器和路由中寻找逻辑错误。 @kingpin2k 感谢您在下面的回答，表明这是由于 HTML 格式错误，我从没想过要在那里检查。
是的，它是一种难以追踪的野兽，但一旦你浪费了一天时间试图追踪它，你就再也不会忘记它了。

标签： ember.js ember-router ember-app-kit

【解决方案1】：

大多数时候我看到它与无效的 HTML、不匹配的 div/节等有关。

<section id="details">
{{outlet details}}
<section id="details">

应该是

<section id="details">
{{outlet details}}
</section>

在 plan.hbs 中，section 拼写错误为secion。

另外使用 / 作为概念路径似乎会混淆 ember，它认为末尾带有 / 的 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'});
  });
});

【讨论】：

嗨，Kingpin2k，非常感谢您发现这一点。这解决了我的两个错误之一，非常感谢！在子路由之间转换时，那个神秘的 ember 错误消息仍然存在问题......
我会尝试托管一些东西，或者模拟 API 并提交，以便应用程序可以独立运行。
“问题 #2”下的所有错误 :-) 现在已将应用程序托管在 BitNami EC2 实例上，但尚未部署 Web 服务... 让您知道：refset.sparklingideas.co.uk:8000 非常感谢!
好的，应用现在托管在这里：refset.sparklingideas.co.uk:8000，网络服务 API 已启动。
或从 git 克隆，指向实时 api，所以应该都可以工作：github.com/sparkling/snomed-refset