如何動態定義使用套索在快速JS路徑中呈現的marko模板的依賴關係？

例如：考慮路線/主題路線應該將其自身放入指定爲路線/查詢參數的主題（讀取：LESS顏色變量）中。基於主題參數，自定義的JS腳本也可能需要注入。如何動態定義使用套索在快速JS路徑中呈現的marko模板的依賴關係？

根據提供的參數（這會排除預先配置套索或使用bower.json），腳本和樣式可能會也可能不會包含在內。這也意味着必須在路由呈現模板之前指定依賴關係。

我目前使用的Marko V4 + ExpressJS +套索+少+套索馬爾科+套索少

我不張貼代碼，因爲它試圖這麼多事情出來後有點所有的地方。如果描述不夠清楚，請告訴我。出於演示目的，將嘗試放置一個沙箱。

UPDATE：添加在覈心文件和目錄結構

sandbox 
|- components 
| |- app-main.marko 
|- dependencies 
| |- theme1 
|  |- main.js 
|  |- variables.less 
| |- theme2 
|  |- main.js 
|  |- variables.less 
|- node_modules 
|- public 
|- templates 
| |- base 
|  |- index.marko 
|  |- style.less 
|  |- browser.json 
|- index.js 
|- package.json 



//index.js 
var markoExpress = require('marko/express'); 
require('marko/node-require'); 

var express = require('express'); 

var app = express(); 

var compression = require('compression'); 
var isProduction = process.env.NODE_ENV === 'production'; 

var lasso = require('lasso'); 
lasso.configure({ 
    plugins: [ 
     'lasso-marko', 
     'lasso-less' 
    ], 
    outputDir: __dirname + '/public', 
    bundlingEnabled: isProduction, 
    minify: isProduction, 
    fingerprintsEnabled: isProduction, 
}); 

app.use(express.static('public')); 
app.use(markoExpress()); 


app.use(compression()); 


app.use(require('lasso/middleware').serveStatic()); 

var template = require('./templates/base'); 
app.get('/:pub', function (req, res) { 
    var pub = req.params.pub || "theme1"; 

    res.marko(template, { 
     theme:pub 
    }); 
}); 

app.listen(3000, function() { 
    console.log('Example app listening on port 3000!'); 
    if (process.send) { 
     process.send('online'); 
    } 
}); 


//browser.json 
{ 
    "dependencies": [ 
     { 
      "if-flag": "theme1", 
      "dependencies": [ 
       "less-import: ../../dependencies/theme1/variables.less", 
       "../../dependencies/theme1/main.js"    
      ] 
     }, 
     { 
      "if-flag": "theme2", 
      "dependencies": [ 
       "less-import: ../../dependencies/theme2/variables.less", 
       "../../dependencies/theme2/main.js" 
      ] 
     } 
    ] 
} 


<!-- index.marko --> 
<lasso-page package-path="./browser.json" flags="['${input.theme}']"/> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 
    <title>Test Template</title> 

    <!-- CSS includes --> 
    <lasso-head/> 

</head> 
<body> 

<!-- Top-level UI component: --> 
<include('../../components/app-main',input) /> 

<lasso-body/> 
</body> 
</html> 


//style.less 
main { 
    background-color: @bgcolor; 
    color: @fgcolor; 
    width: 100%; 
    height: 100%; 
} 





// ~/dependencies/theme1/variables.less 
@bgcolor: red; 
@fgcolor: white; 

// ~/dependencies/theme1/main.js 
alert("theme1"); 



<!-- app-main.marko --> 
<main>TADAAA</main>

來源

2017-03-28 Chirag Ravindra

在嘗試了很多事情之後，我不得不求助於以編程方式將樣式表構建爲字符串並將其插入樣式標記中的模板中。

<style>${input.computedStyleString}</style>

這顯然是理想的（考慮如何處理套索一切這麼好），但它的作品少。

來源

2017-06-01 11:06:40

套索支持基於「標誌」條件的依賴關係：https://github.com/lasso-js/lasso#conditional-dependencies

如果使主題的標誌之一，你可以再使用的標誌有條件拉欠變量或其他依賴於你的browser.json：

{ 
    "dependencies": [ 
     { 
      "if-flag": "theme1", 
      "dependencies": [ 
       "less-import: ./theme1/variables.less"    
      ] 
     }, 
     { 
      "if-flag": "theme2", 
      "dependencies": [ 
       "less-import: ./theme2/variables.less"    
      ] 
     } 
    ] 
}

你可以做AP重建所有主題，或者您可以在運行時使用Lasso動態構建頁面JS/CSS。

希望能夠解決您的問題。

來源

2017-03-29 17:12:17

謝謝，帕特里克。雖然這似乎是我正在尋找的東西，但我卻無法使其運行。變量越少越未定義並拋出錯誤。使用沙盒示例更新了該問題以供參考。任何有關我可能做錯什麼的洞察力將不勝感激。 –

很難說沒有看到代碼，但我們可以看看下面的示例應用程序，我們使用'less-import：'：https：//github.com/marko-js-samples/ui-components-playground/ blob/71a45a42a96831cefd9956fc9a721997bfb67f9d/src/global-style/browser.json＃L3 –

我已經在代碼中添加了問題..我已經看到了UI-Components操場..它沒有解決如何動態改變主題 –

如何動態定義使用套索在快速JS路徑中呈現的marko模板的依賴關係？

回答

相關問題