Question

嵌入小部件的代码很简单，但它包含标签中的javascript。

Durandal似乎剥离了这样的脚本标签。

如何在Durandal视图中使用嵌入代码？

https://dev.twitter.com/web/embedded-timelines

<a class="twitter-timeline" href="https://twitter.com/XXX" data-widget-id="XXX">Tweets by @XXX</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Answer 1

您需要编写自定义Knockout绑定，或者创建一个Durandal小部件，其中视图是您的标记，viewModel处理标记中的JavaScript。

一些注意事项：在您的窗口小部件的视图模型中，您可以避免d.getElementsByTagName(s)支持简单地引用传递给attached或compositionComplete处理程序的视图引用。杜兰达尔提供。实际上，你几乎可以避免所有直接的DOM操作，而是支持Durandal的导入视图引用和Knockout / Durandal的模板/合成。

<强>更新

从您引用的文档中查看此内容：＆＃34;如果您已在页面中包含我们的“widgets.js”JavaScript以显示嵌入的推文或Twitter按钮，则不需要再次包含此脚本;它会自动更新以支持新功能。＆＃34;

这可能会引导您在index.html或index.chtml文件中的脚本标记中简单地引用 widgets.js 。

您不能在Durandal视图中使用脚本标记，但您可以在索引页中使用它们。

第二次更新

在index.html或index.chtml（或者甚至使用AMD）的脚本标记中引用 widget.js 后，就会选择正确的 Durandal 指向加载Twitter小部件的点。如上所示，这可以在attached处理程序或compositionComplete处理程序中。

正如OP在他的评论中指出的那样，一个功能性的地方是compositionComplete，其方式如下：

var compositionComplete = function () { twttr.widgets.load(); }

记录在案here。

这假定twttr在窗口上或注入到viewModel中。

可能的内存泄漏

同样重要的是要注意，小部件的卸载必须在Durandal的detached处理程序中进行。使用Twitter的API卸载，然后确保使Windows引用无效。

如何在Durandal视图中嵌入Twitter时间线？

1 个答案: