Question

更新了解决方案（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语句只是检查我们的app实例是否已经配置了主机，然后什么都不做。

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

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

问题当我想要增强页面上的几个元素时，这种情况有用吗？

Answer 1

这里有一个线索：

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

aurelia.enhance只包含TemplatingEngine实例的.enhance方法。

您可以从容器中提取TemplatingEngine，然后通过.enhance调用bindingContext，因为aurelia.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 });

（免责声明：我没有测试上面所以它可能不准确 - 你也可能需要传递资源对象 - 你可以注入它或从容器中取出它 - 我相信类型只是{{ 1}}）

然而 - 需要注意的一点是：您的Resources实际上不是您的主机元素my-component2的孩子。我不确定这是否会引起问题，但这只是一个想法。

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

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

Answer 2

我现在对这个问题的解决方法（感谢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'));
  });
});

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

Aurelia - 多个Enhance语句

更新了解决方案（28.03.2017）：

问题：

2 个答案: