奥雷利亚-多重增强语句
采用解决办法更新(28.03.2017)：
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8
用解决方案更新Aurelia文档(向下滚动一点)。
特别感谢Charleh的提示。
问题：
Aurelia有一个很好的特性叫做enhance，它可以帮助您使用application增强应用程序的特定部分。
但是，我们能在同一页上有多个增强语句吗？这似乎很有问题。
示例：
任务:增强页面上的第一个组件，然后从服务器获取一些数据，并以服务器数据作为绑定上下文增强页面上的第二个组件。
<!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;
}
...问题，所以这里的实际问题是，任何增强的元素都会自动成为应用程序主机(根)，当您尝试使用相同的aurelia实例增强另一个元素时，最终只会始终增强第一个元素。
当我想增强页面上的几个元素时，问题是否也适用于这种情况？
回答 2
Stack Overflow用户
发布于 2016-09-06 12:18:10
这里有条线索：
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 });(免责声明:我没有测试上面的内容，所以可能不准确-而且您可能需要传递资源对象--您可以将其注入或从容器中提取--我相信类型只是Resources)
但是，需要注意的是:您的my-component2实际上不会是宿主元素my-component1的子元素。我不确定这是否会引起更多的问题，但这只是一个想法。
我仍然很好奇，为什么要引导一个Aurelia实例，然后让它在同一个页面上增强多个元素，而不是仅仅将所有服务器响应逻辑封装在组件的视图模型本身中呢？
也许你能给出更多的背景来解释这背后的原因？
Stack Overflow用户
发布于 2016-09-13 11:37:52
我现在要解决这个问题(感谢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'));
});
});这样，您可以跳过应用程序的主机配置，并且可以在页面上增强任意数量的自定义元素。
https://stackoverflow.com/questions/39311949
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号