Knockout 间歇性地将元素与 [object HTMLDivElement] 绑定答案

【问题标题】：Knockout binds element with [object HTMLDivElement] intermittentlyKnockout 间歇性地将元素与 [object HTMLDivElement] 绑定
【发布时间】：2019-05-06 21:48:05
【问题描述】：

我在我的 UI 应用程序中使用 requireJs+knockout js。
我的主 html 文件 (index.html) 中有一个 div 元素，例如：

<html style="height:100%" lang="en">
  <head>
     <title>Main</title>
     <script data-main="myMain" src="/path/js/libs/require/require.js" type="text/javascript"></script>
  </head>
  <body  style="background-color:#EDEDED">
        <div class="someClass" id="loading" data-bind="text:loading"></div>
  </body>
</html>

我将它绑定到 myMain.js 文件中的“正在加载”文本：

ko.applyBindings({loading: getTranslatedStringFromLib('LOADING')}, $('#loading')[0]);

虽然这在 10 个案例中有 9 个都可以正常工作，但偶尔会在 div 中注入 [object HTMLDivElement]，使生成的代码看起来像：

<div data-bind="text:loading" class="someClass" id="loading">[object HTMLDivElement]</div>

以前有人见过这样的东西吗？有什么帮助吗？

【问题讨论】：

标签： javascript knockout.js requirejs knockout-3.0

【解决方案1】：

这可能是因为您有一个 id 为 loading 的元素，并且当（出于某种原因）视图模型不可用（或正在更改）时，它将 loading 标记解析为 window.loading references 你的 #loading 元素。

见Fiddle（例如）

【讨论】：

在什么情况下[视图模型不可用（或正在改变）]会发生？从 har 文件中可以清楚地看到 myMain.js 文件已下载。
如果您重新应用模型并且它不包含loading 属性，它将回退到window.loading。此外，您的 getTranslatedStringFromLib() 函数可能是罪魁祸首。如果您认为相关，请显示其代码。