8

更新解决方案（28.03.2017）：

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8
用解决方案更新了 Aurelia 文档（向下滚动一点）。
特别感谢Charleh的提示。

问题：

Aurelia 有这个很好的功能调用enhance，它可以帮助您使用 Aurelia 功能增强应用程序的特定部分。
但是我们可以在同一个页面上有多个增强语句吗？似乎有问题。

示例：
任务：增强页面上的第一个组件，然后从服务器获取一些数据并使用服务器数据作为绑定上下文增强页面上的第二个组件

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <my-component1></my-component1>
    <my-component2></my-component2>
  </body>
</html>

JS 

import { bootstrap } from 'aurelia-bootstrapper-webpack';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .globalResources("my-component1", "my-component2");

  aurelia.start().then((app) => {

    // Enhance first element
    app.enhance(null, document.querySelector('my-component1'));

    // Get some data from server and then enhance second element with binding context
    getSomeDataFromServer().then((data) => {
      app.enhance(data, document.querySelector('my-component2'));
    });
  });
});

结果：
在结果中我们会增强第一个组件，但是到了第二个组件的时候，Aurelia 会尝试再次增强第一个组件！
它的发生是因为aurelia-framework.js _configureHost方法。
因此，基本上，当您启动enhance它时，它会以您的元素作为应用程序主机来启动此方法：

Aurelia.prototype.enhance = function enhance() {
  var _this2 = this;

  var bindingContext = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
  var applicationHost = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];

  this._configureHost(applicationHost || _aureliaPal.DOM.querySelectorAll('body')[0]);

  return new Promise(function (resolve) {
    var engine = _this2.container.get(_aureliaTemplating.TemplatingEngine);
    _this2.root = engine.enhance({ container: _this2.container, element: _this2.host, resources: _this2.resources, bindingContext: bindingContext });
    _this2.root.attached();
    _this2._onAureliaComposed();
    resolve(_this2);
  });
};

在里面_configureHost我们可以看到这个 if 语句，它只是检查我们的应用程序实例是否已经配置了主机，然后什么也不做。

Aurelia.prototype._configureHost = function _configureHost(applicationHost) {
  if (this.hostConfigured) {
    return;
  }
  ...

问题 所以这里的实际问题是任何增强的元素都会自动成为应用程序宿主（根），当您尝试使用相同的 aurelia 实例增强另一个元素时，您最终只会始终增强第一个元素。

问题 当我想增强页面上的几个元素时，这是否有某种方式？

4

2 回答 2

3

这里有一个线索：

this.root = engine.enhance({container: this.container, element: this.host, resources: this.resources, bindingContext: bindingContext});
this.root.attached();

aurelia.enhance只是包装了TemplatingEngine实例的方法.enhance。

您可以TemplatingEngine从容器中拉出并调用.enhance它，传递bindingContextsinceaurelia.enhance就是这样做的（但添加了您已经通过第一次.enhance调用完成的额外“主机配置”步骤）。

所以那一点可能看起来像：

import { Container } from 'aurelia-dependency-injection';

let engine = Container.instance.get(TemplatingEngine);

engine.enhance({ container: Container.instance, element: document.querySelect('my-component2'), resources: (you might need to inject these too), bindingContext: someContext });

（免责声明：我没有测试上述内容，因此它可能不准确 - 您可能还需要传入资源对象 - 您可以将其注入或从容器中拉出 - 我相信类型只是Resources）

但是 - 需要注意的是：您my-component2实际上不会是您的 host element 的孩子my-component1。我不确定这是否会导致进一步的问题，但这只是一个想法。

我仍然很好奇你为什么要引导一个 Aurelia 实例，然后让它增强同一页面上的多个元素，而不是仅仅将所有服务器响应逻辑包装在组件的视图模型本身中？

也许您可以为这背后的原因提供更多背景信息？

于 2016-09-06T12:18:10.167 回答
3

我现在解决这个问题的方法（感谢 Charleh 提供的线索）：

import { bootstrap } from 'aurelia-bootstrapper-webpack';
import {TemplatingEngine} from "aurelia-framework";

let enhanceNode = function (app, node, bindingContext = null) {
  let engine = app.container.get(TemplatingEngine);
  let component = engine.enhance({container: app.container, element: node, resources: app.resources, bindingContext: bindingContext});
  component.attached();
}

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .globalResources("my-component1", "my-component2")

  aurelia.start().then((app) => {
    enhanceNode(document.querySelector('my-component1'));
    enhanceNode(document.querySelector('my-component2'));
  });
});

这样，您可以跳过应用程序的主机配置，并可以在页面上根据需要增强任意数量的自定义元素。

于 2016-09-13T11:37:52.903 回答