durandal.js - 是否可以使用視圖加載按需查看特定的CSS？

我最近開始使用Durandal.js的SPA應用程序。我們有幾個視圖和模型，這些視圖和模型在不同的時間組成/加載到應用程序中。durandal.js - 是否可以使用視圖加載按需查看特定的CSS？

例如：MyFavorites.js + MyFavorites.html

有沒有辦法以某種方式有迪朗達爾「鏈接」爲了一個CSS文件（在這種情況下，也許MyFavorites.css），以便它可以得到它根據需要並可能利用緩存？我可以直接在我的HTML文件中添加一個或標籤，但我認爲這是一種不好的做法。

來源

2013-04-17 Rob

杜蘭達沒有任何特別的東西。但是，有一個require.js css加載器插件，您可以從與功能關聯的js模塊中使用它。我認爲這樣做有一些「陷阱」，但是如果你真的想要動態的css注入，那麼值得研究一下。

來源

2013-04-17 16:10:06 EisenbergEffect

除了require.js css加載器插件，有沒有人使用任何其他方法？我通常會將我的所有CSS都縮小到一個基本文件中，並將其包含在我的index.html中，但是隻有我的CSS才能加載模塊會更方便。 – Rodiwa

我不確定爲什麼在視圖的定位標記上放置一個id或class是「不好的做法」（CSSlist會對你喊叫，但我認爲這很愚蠢）;它似乎是一個非常優雅的解決方案，它使用css提供給你的級聯。我認爲這是由Head JS動態採取的方法。你可能會考慮這個，但我不確定它會如何與Require JS一起玩。無論如何，手動方法應該可以正常工作。你唯一沒有得到的是相關CSS的懶加載。

另一種方法（可以在Durandal中包含的Knockout樣本中看到）是將<style type='text/css'>...</style>部分放置在view html的頂部。這給你懶加載，代價是沒有你的CSS在單獨的文件。

如果您的自定義視圖樣式需要應用於多個視圖，那麼您可能會採用先前的方法來保持乾爽（當然，使用類而不是id）。

另請參閱RequireJS文檔中的this。

來源

2013-06-01 22:07:49 neverfox

直接在HTML中放置''通常不推薦使用，因爲它不允許您將HTML，CSS分開，這是現今的標準做法。此外，您將無法再使用常見的CSS樣式，因爲您必須在每個需要的HTML文件中包含/維護相同的CSS。更不用說某些樣式有時可以獲得多長時間。 – Rodiwa

我已經創建了一個插件。您可以將它用於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; 
});

來源

2013-08-30 16:25:24

durandal.js - 是否可以使用視圖加載按需查看特定的CSS？

回答

相關問題