2

我使用值绑定 ( <dot:HtmlLiteral Html="{value: BannerHTML}" class="mainBanner"/>) 根据一些变量生成我的一些页面内容。

我还需要在生成的 HTML 上运行一些 javascript 来修复一些小问题，比如为不寻常的缩放场景匹配字体大小等。作为标准，我将可执行的 javascript 放在 HTML 文档的末尾。

在以下任一场景中生成的 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>

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

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

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

4

1 回答 1

1

由于您的问题似乎与 DOM 相关，我可以向您建议两种方法。

  1. 您的 javascript 必须检查并等待 DOM。我强烈建议您阅读这个答案...当页面/DOM准备好时如何调用函数...

  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 事件

于 2020-11-04T17:29:49.767 回答