如何告诉Javascript方法等待绑定值在DotVVM中执行？

问题描述

我使用值绑定（<dot:HtmlLiteral Html="{value: BannerHTML}" class="mainBanner"/>）来基于多个变量生成我的某些页面内容。

我还需要在生成的HTML上运行一些javascript，以修复一些小问题，例如匹配字体大小以适应异常缩放情况等。按照标准，我将可执行JavaScript放在HTML文档的 end 处。

在以下情况之一中生成的HTML：

<div class="mainBanner" data-bind="html: BannerHTML">
    <div class="mainBanner-upper">some text</div>
    <div class="mainBanner-face" id="mainTitle">some other text</div>
    <div class="mainBanner-lower">some more text</div>
</div>

用于对该HTML进行操作的JS：
（需要https://github.com/adactio/FitText.js）

window.fitText(document.getElementById("mainTitle"));

据我所知，javascript在生成HTML之前执行，并且在元素上执行的javascript返回Cannot read property 'xyz' of null。我如何告诉它等待？我既尝试将javascript文件绑定到资源，又简单地在body元素的末尾使用<script>标签将其写入，但没有成功。

解决方法

由于您的问题似乎与DOM有关，因此我可以向您提出两个解决方案。

1. 您的JavaScript必须检查并等待DOM。我强烈建议您阅读answer至...how to call a function when the page/DOM is ready...

2. 绑定数据后动态添加脚本（对此我不太确定）

祝你好运。

编辑

因此，我去看了一下dotvvm文档以查找事件调用，并发现了一些有趣的东西：

每个DotVVM页面都包含Dotvvm.js，它在全局范围内定义了dotvvm。该对象可用于访问视图模型并对各种页面事件做出反应。

这使您可以访问DOTVVM触发的特定事件，而您只需要找到您所需的事件即可。我在下面为您提供了一个示例。

您可以尝试这样的操作（该事件可能不是您需要的）：

<script>
    //By subscribing to the event,your code will only be executed 
    // if "init" event is fired by dotvvvm
    dotvvm.events.init.subscribe(()=>{ 
        window.fitText(document.getElementById("mainTitle"));  
        //basically enclose the content of your script tag with this.
    });
</script>

请务必阅读文档，因为我可能省略了一些内容？ DOTVVM Javascript Events