自定义元素问题：ref 元素在视图模型中为空

Question

我在 Aurelia 中有一个自定义元素，它在后台使用 jQuery 插件 (KendoUI)。此自定义元素正在使用 if.bind 属性的视图中使用。

自定义元素使用内联模板，如下所示：

@inlineView('<template><input type="text" ref="proxy" class.bind="class"></template>')

由于jQuery插件的性质，我必须传递一个元素来初始化。我使用我在模板中定义的 ref，如下所示：

$(this.proxy).doJQueryStuff(...)

元素分离并重新附加后，ref 元素（this.proxy 在我的视图模型中）为空。

我最初认为问题是因为 jQuery 改变了 DOM，它也改变了视图模板。我认为在元素分离后（并通过 jQuery 调用销毁以删除所有 KendoUI 元数据），输入引用不再可用导致重新附加时出错，因为 Aurelia 正在缓存视图。然而，这种情况并非如此。已经确认 Aurelia 不会缓存视图，除非您明确告诉它这样做，并且在 this simplified plunk 中，行为符合预期。

为什么在我的视图模型中对我的 ref 元素的引用在附加和分离元素后为空？

请注意，自定义元素是页面视图的一部分，在此结构内：

<div id="application" class="au-animate" if.bind="isLoggedIn">
    <nav-bar router.bind="router"></nav-bar>
    <div class="page-host">
        <router-view></router-view>
    </div>
</div>

我不知道是否有人运行对 if 绑定中的 router-view 有任何问题。

Answer 1

今晚 this pull request 修复了这个问题。运行 jspm update 并确认您已安装 github:aurelia/templating-resources@0.17.3。

问题是 if 模板控制器在将其隐藏后重新附加到 DOM 时没有重新绑定视图。

自定义元素问题：ref 元素在视图模型中为空

Custom Element issue: ref element is null in viewmodel

javascript

aurelia