问题标签 [aurelia-templating]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - aurelia 1.0 中的可替换属性是否已过时?
我的印象是slot
superseded replaceable
,但有人告诉我replaceable
在 1.0 版本中重新引入,这是真的吗?
javascript - 使用和使用有什么区别和? 有哪些更适合的场景?
在过去的四个月里,我和一个队友一直在Aurelia中构建一个应用程序,他和我一直在以这两种不同的方式创建和使用组件。我希望有一些一致性并将所有内容更改为两种样式中的一种,但我不知道哪一种更适合我们的需求。
我选择使用<compose>
它是因为对我来说它感觉更干净并且适合我遇到的所有需求,但如果使用自定义元素客观上更好,我想切换到它。
例如:
(他的方式视图模型:)
(他的看法:)
(我的方式视图模型:)
(我的看法:)
我需要改变吗?如果不需要,我可以用什么理由说服他使用我一直使用的相同风格?
javascript - 在 Aurelia 中,我可以从包含视图模型中绑定一个函数以由我的自定义元素调用吗?
我有一个将接受用户输入的自定义元素,在单击 [save] 按钮时,我想将信息传递给父视图模型,以便将其发送到服务器并移至下一部分。例如,我将对此进行简化:
my-element.js
:
my-element.html
:
parent-view-model.js
:
parent-view-model.html
:
演示见(app.js 和 app.html 分别代表 parent-view-model.js 和 parent-view-model.html):
https://gist.run/?id=96b203e9ca03b62dfb202626c2202989
有用!有点儿。不幸的是,this
似乎绑定到my-element
而不是parent-view-model
,所以在这个例子中,打印到控制台的是:parent property: undefined
。那不管用。
我知道我可以利用 EventAggregator 来促进自定义元素和视图模型之间的一些通信,但如果我能帮助它,我想避免增加复杂性。
aurelia - 自定义 aurelia 组件中的内联模板
在 aurelia 中,对于视图,我可以通过实现 getViewStrategy 方法并在 ViewModel 中返回一个 InlineViewStrategy 来提供一个内联模板。但这仅适用于视图,不适用于自定义元素。是否有类似的方法为自定义元素提供内联模板?
谢谢
aurelia - Aurelia 动态组合
我正在尝试在 aurelia 中实现动态组合。更准确地说,我正在创建选项卡,并为每个新选项卡添加一个新 div,并在其中使用 compositionEngine.compose(...) 添加与该选项卡对应的组件。可以在此处找到一个工作示例:https ://gist.run/?id=08a04dad8d94af01989d789a216195f3 。然而,我正在经历一些奇怪的行为。例如,如果我在 2 个选项卡中两次打开相同的组件,它似乎会重用(共享)viewModel。只需打开模块 2 一次,单击更改以增加计数器,然后再次打开它。它将显示以前的值。有任何想法吗?
aurelia - Aurelia:如何从视图模型中添加和删除自定义属性
如何从视图模型中添加和删除自定义属性?
使用 targetElement.SetAttribute('mycustomelement') 添加属性不会激活 Aurelia 自定义属性。
TemplatingEngine.Enhance() 能否为视图模型中的自定义属性带来活力?
aurelia-templating - Aurelia - 多个增强语句
更新解决方案(28.03.2017):
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8
用解决方案更新了 Aurelia 文档(向下滚动一点)。
特别感谢Charleh的提示。
问题:
Aurelia 有这个很好的功能调用enhance
,它可以帮助您使用 Aurelia 功能增强应用程序的特定部分。
但是我们可以在同一个页面上有多个增强语句吗?似乎有问题。
示例:
任务:增强页面上的第一个组件,然后从服务器获取一些数据并使用服务器数据作为绑定上下文增强页面上的第二个组件
HTML
JS
结果:
在结果中我们会增强第一个组件,但是到了第二个组件的时候,Aurelia 会尝试再次增强第一个组件!
它的发生是因为aurelia-framework.js
_configureHost
方法。
因此,基本上,当您启动enhance
它时,它会以您的元素作为应用程序主机来启动此方法:
在里面_configureHost
我们可以看到这个 if 语句,它只是检查我们的应用程序实例是否已经配置了主机,然后什么也不做。
问题 所以这里的实际问题是任何增强的元素都会自动成为应用程序宿主(根),当您尝试使用相同的 aurelia 实例增强另一个元素时,您最终只会始终增强第一个元素。
问题 当我想增强页面上的几个元素时,这是否有某种方式?
javascript - Aurelia - 默认情况下自定义元素不继承绑定上下文。没事吧?
每个视图模型在其bind()
方法中都有两个参数:bindingContext
和overrideContext
. 第一个描述当前范围,第二个描述外部范围:父级,父级的父级等。这看起来像这样:
这也允许视图模型访问父范围的方法和字段。
bindingContext
如果创建了自定义元素,它会overrideContext
在bind()
. 但是当它将它们传递给它的孩子(ren)时,它不是预期的格式,而是:
请注意,原件parentOverrideContext
已移至__parentOverrideContext
. 这样,模板引擎将无法解析父级范围内的任何内容。让我们举一个具体的例子:
page.html:
page.js:
这里我想MyPage
从最内层视图模型(<custom-element-2>
经过一些调试,我意识到有一个标志(instruction.inheritBindingContext
),它决定是否应该包含父级。默认情况下,该标志适用true
于路由器视图,但false
适用于自定义元素。问题:我是否没有正确理解它,这是理想的行为吗?或者它是一个错误?
无论如何,如果有人感兴趣,可以轻松更改标志:
aurelia - 在 AureliaJS 中,如何从 JS 中添加/删除视图而不是标记?
我有几个实现自定义元素的视图/组件,所以我在我的标记中使用它们,如下所示:
到目前为止,一切都很好。但现在我需要以编程方式添加/删除这些视图/组件。我正在阅读 aurlia 集线器,但我没有成功......任何提示表示赞赏。
aurelia - 如何在不使用路由器的情况下强制 Aurelia 销毁/重新创建视图/视图模型对
当开始使用 Aureliaif.bind
并不会导致子视图/视图模型被破坏时,这令人惊讶。它确实经历了绑定/取消绑定附加/分离循环,我可以看到这在某些情况下是如何有意义的。但我也希望能够完全破坏视图/视图模型并从头开始重新创建它。我创建了一个plunker,展示了我使用if.bind
. 我正在寻找有关如何完全销毁 <my-other-element> 的建议。谢谢!