Question

我试图在Salvattore应用程序中集成Aurelia（CSS中的砌体替代方法），但不幸的是它不起作用。在尝试了很多事情之后，我感到失望，并认为Salvattore根本不可能在Aurelia应用程序中工作。

这就是我所做的：感谢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的示例代码笔下面

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

Answer 1

您必须了解cli捆绑器是AMD捆绑器。您的myList = [] for (var key in testjson) { if(key !== "test4") { myList.push(testjson[key]); } }在<script src="javascript/salvattore.min.js"></script>之下，因此当浏览器读取vendor-bundle时，AMD加载器（requirejs / systemjs）已经就位。这就是为什么salvattore尝试将自身加载为AMD模块而不是创建全局变量。

您可以将salvattore.min.js移到salvattore.min.js脚本标签上方。或在vendor-bundle中使用prepend，在prepend列表中的requirejs之前添加salvattore。

您可以尝试的另一件事是将其用作模块。不要在html中添加脚本标签，也不要在脚本前添加脚本标签。但是，请将此行添加到您的aurelia.json或main.js中。

main.ts

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 个答案: