"无法对不在DOM中的Metamorph执行操作" - 仅在<= IE8中

Question

使用Ember 0.9.7.1

当我的应用程序启动并进入第一个状态时,在IE8及更低版本中出现此错误.我有一个相当大的应用程序,所以我不确定我可以在jsFiddle中重现,但我会尝试显示下面的相关位.

我在GitHub上看过这些类似的问题,但我不认为要么完全描述我做错了什么(它是我的......对吧？:))

https://github.com/emberjs/ember.js/issues/752
https://github.com/emberjs/ember.js/issues/447

我的应用程序的初始视图由状态管理器创建/加载,如下所示:

SYOS.stateManager = Em.StateManager.create({

    enableLogging: true,
    rootElement: #syos-root,
    initialState: 'noSectionSelected',

    noSectionSelected: Ember.ViewState.create({

        view: SYOS.SelectSectionView,

        chooseSection: function (manager, context) {

            manager.goToState('sectionSelected');

        }

    }),
<snip>

该视图基本上定义为:

SYOS.SelectSectionView = Em.View.extend({

templateName: 'selectSectionView',
sectionsBinding: 'SYOS.sectionController.sections'
});

模板的精简版本如下所示:

<script type="text/x-handlebars" data-template-name="selectSectionView">

<h2>Some markup</h2>

<table class="select-sect" cellspacing="0">
{{#each sections}}
    {{#view SYOS.SelectSectionRowView sectionBinding="this" tagName="tr"}}
    <td class="sect">{{section.name}}</td>
    {{/view}}
{{/each}}
</table>

</script>

如果有帮助,这个模板直接在我的html中定义.

当我加载页面时,控制台日志显示:

LOG: STATEMANAGER: Entering noSectionSelected 
SCRIPT438: Object doesn't support this property or method 
ember-0.9.7.1.min.js, line 10 character 30680
SCRIPT5022: Cannot perform operations on a Metamorph that is not in the DOM. 
ember-0.9.7.1.min.js, line 13 character 29412
SCRIPT5022: Exception thrown and not caught 
ember-0.9.7.1.min.js, line 13 character 16607

使用IE的调试器(eww)打破第一个错误,我可以看到#each变形标记似乎发生了错误.它打破了这一行:

g.prototype.checkRemoved=function(){if(this.isRemoved())throw new Error("Cannot perform operations on a Metamorph that is not in the DOM.")}

因为this.isRemoved()返回true.this在调试器中检查我看到this.start=="metamorph-6-start".如果我在工作浏览器中搜索该变形标记,它似乎是#each我模板中块的开始标记.

sectionsBinding是一个从jQuery .ajax调用加载的数组,所以最初它将是[]然后使用this.get('sections').pushObject(section);while循环调用我的控制器中的ajax调用的结果来填充.

我没有在此状态下执行任何动态视图追加或删除,它只需要加载视图并在从ajax服务调用返回时绑定这些节.

任何人都可以指出我正确的方向吗？谢谢!

编辑:更新到Ember 0.9.8.1,现在在控制台中减少了一个错误:

LOG: STATEMANAGER: Entering noSectionSelected 
SCRIPT5022: Cannot perform operations on a Metamorph that is not in the DOM. 
ember-0.9.8.1.min.js, line 14 character 4051
SCRIPT438: Object doesn't support this property or method 
ember-0.9.8.1.min.js, line 10 character 31677

Answer 1

跟进这一点,让任何谷歌成员在那里我必须做什么来解决这个问题.

简而言之 - 我通过完全重新处理我的观点以及如何将它们添加到应用程序来解决这个问题.

我强烈建议任何使用Ember应用程序遇到奇怪的人使用Ember的Debug版本运行他们的应用程序.控制台中提供的断言和反馈非常宝贵.

我实际上有2个问题在进行:

1)在#each构建上面的表格中,我在另一个#each地方使用了一个绑定的把手助手(可在http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds找到/非常非常有用).

由于这是嵌套得如此之深,我不得不使用{{ boundHelper this}}它来调用我的绑定助手,这似乎真的让人感觉不舒服.Chrome,Firefox和IE9似乎并没有因此而窒息 - 不确定原因.但基本上使用绑定的帮助程序this最终传递''给normalizePath,并导致此断言失败

function normalizePath(path) {
  Ember.assert('must pass non-empty string to normalizePath()', path && path!=='');

我通过将boundHelper更改为值数组或单个值来解决此问题,因此我可以将其编写为{{boundHelper colors}}并在我的帮助器中循环而不是使用#each.

2)因此,一个问题下来,但仍然得到原始的变形错误.清除了另一个错误后,我现在可以告诉变形错误来自另一个视图.

我有2个嵌套视图,使用#view帮助器在我的HTML中定义.不知何故,嵌套视图导致父级重新渲染.同样,Ember的调试版本是一个很好的工具来跟踪它,因为它在控制台中记录了一条消息.

我不是百分之百确定为什么这是一个这样的问题,但似乎在重新渲染过程中,变形标签不存在并且它会引发一个问题.这看起来似乎可能是Ember中的一个错误,但更可能的是我只是没有采取"Ember方式".和Ember一样好,也很容易射击你的脚:)

我最终将这些内联视图制作到Handlebars模板中,并将视图附加到Ember App.ready函数中的DOM.这清除了所有错误,IE 7和8现在可以无误地呈现应用程序.

Answer 2

当我在HTML注释中发现一些把手代码时,我才解决了这个问题.违规代码可能刚被移除或包装在手柄评论中,如下所示:

{{!--
    <h1>{{myTitle}}</h1>
--}}

Answer 3

我遇到了这个问题,因为我们试图这样做:

<input size="16" type="text" valueBinding="{{deadline}}">

事实上它应该是:

<input size="16" type="text" {{bindAttr valueBinding="deadline"}}>