2016-10-28 112 views
1

嗨,我有一個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四處走動是理想的解決方案,我只是在尋找一種方法來實現它。仍然期待更好的建議。

回答

0

好,我已經找到了有效的解決方案:

首先,在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」實例。