將Salvattore集成到我的Aurelia應用程序中

Question

我試圖在我的Aurelia應用程序中集成Salvattore （CSS中的砌體替代方案），但不幸的是，它不起作用。 在嘗試了很多事情之后，我感到失望，並認為Salvattore根本不可能在Aurelia應用程序中工作。

這就是我所做的：由於使用了au new的CLI au new我創建了一個新的Aurelia項目，並且在該項目內，我使用以下代碼在Aurelia項目內創建了一個html頁面：

<div id="grid" data-columns>
    <div>Item #1</div>
    <div>Item #2</div>
    <div>Item #3</div>
    <div>Item #4</div>
</div>

有了這個CSS：

#grid[data-columns]::before {
    content: '3 .column.size-1of3'; 
}

/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }

最初，我只是嘗試在index.html頁面（就在close body標簽上方）內引用Salvattore的js代碼，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height />
  </head>

  <body aurelia-app="main">
    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
    <script src="javascript/salvattore.min.js"></script>
  </body>
</html>

它不起作用，控制台出現錯誤。

我還嘗試通過npm install salvattore --save安裝Salvattore ，並將其添加到aurelia.json中。 在main.ts我嘗試引用它： import 'salvattore'; 但它也不起作用。 我的意思是，這次沒有錯誤，但是什么也沒發生。 最后，由於使用了scriptinjector組件，最后我嘗試將Salvattore js腳本直接插入到頁面內部。 再一次，它不起作用，什么也沒發生。

我是否必須得出一個結論，那就是Salvattore與任何Aurelia項目都不兼容？ 在這種情況下，您知道其他選擇嗎？

在基本html頁面（不是Aurelia）中使用Salvattore的示例codepen下面

https://codepen.io/mitour/pen/wWMOvw

Answer 1

您必須了解cli捆綁器是AMD捆綁器。 您的<script src="javascript/salvattore.min.js"></script>位於vendor-bundle下方，因此當瀏覽器讀取salvattore.min.js時，AMD加載器（requirejs / systemjs）已經就位。 這就是為什么salvattore嘗試將自身加載為AMD模塊而不是創建全局變量。

您可以將salvattore.min.js移到上面的vendor-bundle腳本標簽中。 或在aurelia.json使用prepend，在prepend列表中的requirejs之前添加salvattore。

您可以嘗試的另一件事是將其用作模塊。 不要在html中添加腳本標簽，也不要在腳本前添加腳本標簽。 但是在您的main.js或main.ts添加此行。

import "salvattore"; // this will load it as an AMD module

Answer 2

解決方法如下：

在package.json中添加"salvattore": "^1.0.9"
在aurelia.json中添加"salvattore"

在您的打字稿頁面（.ts）中：

 import * as salvattore from 'salvattore';

 export class MyPage {
     attached() {
         salvattore.init();
     } 
 }

將Salvattore集成到我的Aurelia應用程序中

問題描述

2 個解決方案

解決方案1
4 2019-06-05 23:15:55

解決方案2
0 2019-06-12 05:47:09

將Salvattore集成到我的Aurelia應用程序中

問題描述

2 個解決方案

解決方案1 4 2019-06-05 23:15:55

解決方案2 0 2019-06-12 05:47:09

解決方案1
4 2019-06-05 23:15:55

解決方案2
0 2019-06-12 05:47:09