如何从控制台访问已知的Ember组件

Question

使用Ember调试Chrome扩展程序,我已在我尝试自动化的网站中识别出此组件(但无法直接访问以更改代码):

<MYAPP@component:zipcode-field::ember592>

在层次结构中显示为:

application
    engine
        myui
            zipcodeField

如果我value在调试器中编辑该元素的属性,它会根据需要更新UI和模型.我可以通过控制台的单线程来完成吗？

更新:到目前为止,我可以在控制台中输入:

Ember.lookup.$E.container.lookup("MYAPP@component:zipcode-field")

但无法value像在调试器中那样访问/更改其属性.

更新:

在对其中一个答案的反馈中,我的目标是有一个控制台单行程序,可以在没有安装任何调试器的情况下给某人以便以相同的行为运行代码.使用$E控制台内的变量要求在运行代码之前手动选择元素,这是不够的.

Answer 1

如果我错了,请纠正我,但似乎你没有使用ember检查器(可在firefox和bookmarklet上找到).

一旦你安装了它,很容易检查调试和修改任何与ember相关的内容,为了这个答案,我将使用chrome版本.

在开发人员工具中的ember选项卡中,打开运行ember应用程序的选项卡中的chrome dev工具.

要查看组件,您必须勾选一个复选框

启用组件

启用后,您将能够看到当前使用的所有组件.

单击组件将打开一个包含组件所有属性的面板.

物业小组

要从控制台访问这些属性,只需单击$E组件旁边的所有属性即可.

点击后,您应该在控制台中看到类似的内容.

Ember Inspector ($E):  Class {helperName: (...), logout: (...), isOpenBinding: StreamBinding, currentUserBinding: StreamBinding, _morph: Morph…}

现在您需要做的就是获取属性值:

$E.get('myProperty');

并设置它们:

$E.set('myProperty', newValue);

Answer 2

组件只是一个视图,因此以下内容应该有效:

Ember.View.views[<GUID>]

所以在你的例子中:

Ember.View.views['ember592']

如果要修改/读取value属性,则需要使用get/set ,例如:

Ember.View.views['ember592'].get('value')

Ember.View.views['ember592'].set('value', 'newValue')