Aurelia与淘汰赛安全绑定

时间：2016-10-28 08:18:07

标签： knockout.js aurelia aurelia-cli aurelia-framework

您好我有一个使用Aurelia CLI运行的Aurelia网络应用。

在此之前，我使用SystemJS作为模块加载器，但由于我想强制执行我的应用程序的Content-Security-Policy以便不允许'unsafe-eval'，所以我按照{建议的}更改了Aurelia CLI {3}}

我的应用程序是一个前Durandal应用程序，我转换为Aurelia，因此它广泛使用Knockout。我正在使用aurelia-knockout插件（正如你在main.js中看到的那样）

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

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

我安装了knockout和knockout-secure-binding 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"
          }
        ]

我知道我必须使用以下代码（就像我在旧的Durandal应用程序中所做的那样）来激活敲除安全绑定：

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应用程序中使用它，或者一般如何使aurelia-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());
}

甚至调整npm模块中的aurelia-knockout.js文件，在此行之前插入安全绑定定义

ko.applyBindings(executionContext, this.element);

但是，即使我没有构建错误（我使用“au build”命令构建）也没有上述工作。

更新

我直接在

中插入了ko安全绑定初始化代码 
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的“内置”版本而烦恼是理想的解决方案，我只是在寻找一种方法来使其工作。仍期待更好的提案。

1 个答案:

答案 0 :(得分：0)

好的，我找到了一个有效的解决方案：

首先，在aurelia.json文件中，我定义了“loader”属性：

"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”属性定义如下：

"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”实例。

相关问题
最新问题