4

我最近开始开发一个使用 Durandal.js 的 SPA 应用程序。我们有几个视图和模型，它们在不同时间组合/加载到应用程序中。

例如：MyFavorites.js + MyFavorites.html

有没有办法让 durandal 将视图“链接”到 css 文件（在这种情况下可能是 MyFavorites.css），以便它可以根据需要获取它并可能利用缓存？我可以直接在我的 html 文件中放置一个或标记，但我认为这是一种不好的做法。

4

3 回答 3

7

Durandal 没有专门针对此的任何东西。但是，有一个 require.js css 加载器插件，您可以从与该功能关联的一个 js 模块中使用它。我认为这样做有一些“陷阱”，但如果你真的想要动态 css 注入，那么值得研究一下。

于 2013-04-17T16:10:06.903 回答
4

我创建了一个插件。您可以将其用于 Durandal 2.0。

define(['jquery'], function ($) {
    return {
        loadCss : function (fileName) {
            var cssTag = document.createElement("link")
            cssTag.setAttribute("rel", "stylesheet")
            cssTag.setAttribute("type", "text/css")
            cssTag.setAttribute("href", fileName)
            cssTag.setAttribute("class", "__dynamicCss")

            document.getElementsByTagName("head")[0].appendChild(cssTag)
        },
        removeModuleCss: function () {
            $(".__dynamicCss").remove();

        }
    };
});

您可以在视图模型中使用它，如下所示。

define(['plugins/cssLoader'], function (cssLoader) {
    var ctor = function () {
        this.compositionComplete =  function () {
            cssLoader.loadCss("sample.css");
            cssLoader.loadCss("sample2.css");


        };
        this.deactivate =  function () {
            cssLoader.removeModuleCss();
        }
    };

    return ctor;
});
于 2013-08-30T16:25:24.670 回答
0

我不确定为什么在视图的锚标记上放置 id 或 class 是“不好的做法”（CSSlist 会为 id 大喊大叫，但我认为这很愚蠢）；这似乎是一个非常优雅的解决方案，它使用 css 提供给您使用的级联。我认为这是Head JS动态采用的方法。您可能会对此进行调查，但我不确定它与 Require JS 的效果如何。无论如何，手动方法应该可以正常工作。您唯一没有得到的是相关css的延迟加载。

另一种方法（现在可以在 Durandal 包含的 Knockout 示例中看到）是<style type='text/css'>...</style>在视图 html 的顶部放置一个部分。这为您提供了延迟加载，但代价是您的 css 不在单独的文件中。

如果您的自定义视图样式需要应用于多个视图，您可能会采用前一种方法来保持 DRY（当然，使用类而不是 id）。

另外，请从 RequireJS 文档中查看此内容。

于 2013-06-01T22:07:49.590 回答