Question

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

例如：MyFavorites.js + MyFavorites.html

有没有办法以某种方式拥有durandal＆＃34; link＆＃34;查看css文件（在这种情况下可能是MyFavorites.css），以便它可以根据需要获取它并可能利用缓存？我可以直接在我的html文件中添加或标记，但我认为这是一种不好的做法。

Answer 1

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

Answer 2

我创建了一个插件。您可以将它用于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();

        }
    };
});

您可以在viewmodel中使用它，如下所示。

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;
});

Answer 3

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

另一种方法（现在可以在Durandal附带的Knockout示例中看到）是在视图html的顶部放置一个<style type='text/css'>...</style>部分。这会让你懒惰加载，代价是没有你的css在单独的文件中。

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

另外，请查看RequireJS文档中的this。

durandal.js - 是否可以根据需要加载视图特定的css？

3 个答案: