Aurelia与淘汰赛安全绑定

问题描述：

嗨，我有一个Aurelia网络应用程序与Aurelia CLI运行。Aurelia与淘汰赛安全绑定

之前，我使用SystemJS作为模块加载器，但由于我想强制执行我的应用程序的Content-Security-Policy，以便不允许'unsafe-eval'，所以我改为使用Aurelia CLI this question。

我的应用程序是一个前Durandal应用程序，我转换到Aurelia，因此它广泛使用Knockout。我现在用的Aurelia路上敲除插件（你可以在我main.js看到）

export function configure(aurelia) { 
    aurelia.use 
     .standardConfiguration() 
     .developmentLogging()   
     .plugin('aurelia-knockout'); 

    return aurelia.start().then(() => aurelia.setRoot()); 
}

，我已经安装了淘汰赛和淘汰赛安全结合NPM包，并在aurelia.json配置他们文件：

"dependencies": [ 
      "aurelia-binding", 
      "aurelia-bootstrapper", 
      "aurelia-dependency-injection", 
      "aurelia-event-aggregator", 
      "aurelia-framework", 
      "aurelia-history", 
      "aurelia-history-browser", 
      "aurelia-loader", 
      "aurelia-loader-default", 
      "aurelia-logging", 
      "aurelia-logging-console", 
      "aurelia-metadata", 
      "aurelia-pal", 
      "aurelia-pal-browser", 
      "aurelia-path", 
      "aurelia-polyfills", 
      "aurelia-route-recognizer", 
      "aurelia-router", 
      "aurelia-task-queue", 
      "aurelia-templating", 
      "aurelia-templating-binding", 
      { 
      "name": "text", 
      "path": "../scripts/lib/text" 
      }, 
      { 
      "name": "aurelia-templating-resources", 
      "path": "../node_modules/aurelia-templating-resources/dist/amd", 
      "main": "aurelia-templating-resources" 
      }, 
      { 
      "name": "aurelia-templating-router", 
      "path": "../node_modules/aurelia-templating-router/dist/amd", 
      "main": "aurelia-templating-router" 
      }, 
      { 
      "name": "aurelia-knockout", 
      "path": "../node_modules/aurelia-knockout/dist/amd", 
      "main": "aurelia-knockout" 
      }, 
      { 
      "name": "knockout", 
      "path": "../node_modules/knockout/build/output", 
      "main": "knockout-latest" 
      }, 
      { 
      "name": "knockout-secure-binding", 
      "path": "../node_modules/knockout-secure-binding/dist", 
      "main": "knockout-secure-binding.min" 
      }, 
      { 
      "name": "aurelia-testing", 
      "path": "../node_modules/aurelia-testing/dist/amd", 
      "main": "aurelia-testing", 
      "env": "dev" 
      } 
     ]

我知道我必须使用下面的代码（我在老迪朗达尔应用程序所做的那样），以激活淘汰赛安全绑定：

var options = { 
     attribute: "data-bind",  // default "data-sbind" 
     globals: window,    // default {} 
     bindings: ko.bindingHandlers, // default ko.bindingHandlers 
     noVirtualElements: false  // default true 
    }; 
ko.bindingProvider.instance = new ko.secureBindingsProvider(options);

，但我不知道如何使用它在这个新的Aure中lia应用程序，或者一般情况下如何使aurelia-knockout插件使用knockout的安全绑定版本。我试图改变我main.js文件是这样的：

export function configure(aurelia) {   
    var options = { 
     attribute: "data-bind",  // default "data-sbind" 
     globals: window,    // default {} 
     bindings: ko.bindingHandlers, // default ko.bindingHandlers 
     noVirtualElements: false  // default true 
    }; 
    ko.bindingProvider.instance = new ko.secureBindingsProvider(options); 

    aurelia.use 
     .standardConfiguration() 
     .developmentLogging()   
     .plugin('aurelia-knockout'); 

    return aurelia.start().then(() => aurelia.setRoot()); 
}

甚至调整故宫模块中的Aurelia路上，knockout.js文件，只是这一行之前插入安全绑定定义

ko.applyBindings(executionContext, this.element);

但是，即使我没有构建错误（我使用“au build”命令构建）以上都不起作用。

UPDATE

我插入こ安全直接结合初始化代码内

node_modules\aurelia-knockout\dist\amd\aurelia-knockout-custom-attribute.js

我在第一线加入像这样

define(['exports', 'aurelia-dependency-injection', 'aurelia-templating', 'knockout-secure-binding'], function (exports, _aureliaDependencyInjection, _aureliaTemplating, _knockoutSecureBinding) {

到安全绑定模块的引用

现在我得到这个错误：

Unhandled rejection TypeError: ko.secureBindingsProvider is not a constructor

就好像没有找到/加载安全绑定模块。

无论如何，我不认为使用“构建”版本的node_module四处走动是理想的解决方案，我只是在寻找一种方法来实现它。仍然期待更好的建议。

答

好，我已经找到了有效的解决方案：

首先，在aurelia.json文件我这样定义的“加载”属性：

"loader": { 
     "type": "require", 
     "configTarget": "vendor-bundle.js", 
     "includeBundleMetadataInConfig": "auto", 
     "config": { 
     "waitSeconds": 0, 
     "paths": { 
      "jquery": "../scripts/lib/cdn/jquery-3.1.0.min", 
      "knockout": "../scripts/lib/knockout-3.4.0"   
     } 
     }, 
     "plugins": [ 
     { 
      "name": "text", 
      "extensions": [ 
      ".html", 
      ".css" 
      ], 
      "stub": true 
     } 
     ] 
    },

这样，我有淘汰赛中定义的“全球”。该“捆绑”属性这样定义：

"bundles": [ 
     { 
     "name": "app-bundle.js",   
     "source": [ 
      "[**/*.js]", 
      "**/*.{css,html}" 
     ] 
     }, 
     { 
     "name": "vendor-bundle.js", 
     "prepend": [ 
      "node_modules/bluebird/js/browser/bluebird.core.js",   
      "scripts/lib/require.js" 
     ], 
     "dependencies": [ 
      "aurelia-binding", 
      "aurelia-bootstrapper", 
      "aurelia-dependency-injection", 
      "aurelia-event-aggregator", 
      "aurelia-fetch-client", 
      "aurelia-framework", 
      "aurelia-history", 
      "aurelia-history-browser", 
      "aurelia-loader", 
      "aurelia-loader-default", 
      "aurelia-logging", 
      "aurelia-logging-console", 
      "aurelia-metadata", 
      "aurelia-pal", 
      "aurelia-pal-browser", 
      "aurelia-path", 
      "aurelia-polyfills", 
      "aurelia-route-recognizer", 
      "aurelia-router", 
      "aurelia-task-queue", 
      "aurelia-templating", 
      "aurelia-templating-binding", 
      { 
      "name": "text", 
      "path": "../scripts/lib/text" 
      }, 
      { 
      "name": "aurelia-templating-resources", 
      "path": "../node_modules/aurelia-templating-resources/dist/amd", 
      "main": "aurelia-templating-resources" 
      }, 
      { 
      "name": "aurelia-templating-router", 
      "path": "../node_modules/aurelia-templating-router/dist/amd", 
      "main": "aurelia-templating-router" 
      }, 
      { 
      "name": "aurelia-knockout", 
      "path": "../node_modules/aurelia-knockout/dist/amd", 
      "main": "aurelia-knockout" 
      },   
      { 
      "name": "aurelia-testing", 
      "path": "../node_modules/aurelia-testing/dist/amd", 
      "main": "aurelia-testing", 
      "env": "dev" 
      }, 
      { 
      "name": "icheck", 
      "path": "../node_modules/icheck", 
      "main": "icheck.min" 
      }, 
      { 
      "name": "filesaver.js", 
      "path": "../node_modules/filesaver.js", 
      "main": "FileSaver.min" 
      } 
     ] 
     }

现在我加载所有我需要的main.js里面的应用程序开始之前的插件，我相应的插件添加到globak“KO”变量：

export function configure(aurelia) {  
     aurelia.use 
      .standardConfiguration()   
      .globalResources('views/panel_header.html')   
      .plugin('aurelia-knockout'); 

     aurelia.use.developmentLogging(); 
     var prefix = '../'; 
     var scripts = [ 
      prefix + "/scripts/lib/breeze.debug", 
      prefix + "/scripts/lib/knockout-secure-binding", 
      prefix + "/scripts/lib/knockout.binding.handlers", 
      prefix + "/scripts/lib/knockout.wrap", 
      prefix + "/scripts/lib/knockout.dirtyFlag", 
      prefix + "/scripts/lib/knockout-sortable.min" 
     ]; 

     return aurelia.start().then(() => { 
      require(scripts, function(breeze, secureBindingProvider, kbh, wrap, dirtyFlag, sortable) { 
       require([ 
        prefix + "/scripts/lib/breeze.savequeuing", 
       ], function(savequeuing){ 
        ko.bindingProvider.instance = new ko.secureBindingsProvider({ 
    attribute: "data-bind",  // default "data-sbind" 
    globals: window,    // default {} 
    bindings: ko.bindingHandlers, // default ko.bindingHandlers 
    noVirtualElements: false  // default true 
}); 
        ko.wrap = wrap;    
        ko.dirtyFlag = dirtyFlag; 
        ko.sortable = sortable; 
        aurelia.setRoot(); 
       });    
      });      
     });  
    }

现在，当aurelia-knockout插件执行绑定时，它会根据需要使用“knockout-secure-binding”实例。

Aurelia与淘汰赛安全绑定

相关推荐