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

使用Ember debug Chrome extension，我在一个试图自动化的网站上识别了这个组件（但无法直接访问更改代码）：

如果我在调试器中编辑该元素的

值

属性，它会根据需要更新UI和模型。我可以通过控制台上的一个衬里来执行此操作吗

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

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

但无法像在调试器中一样访问/更改其

值

属性

更新：

---

作为对其中一个答案的反馈，我的目标是提供一个控制台一行程序，它可以提供给没有安装任何调试器的人，以便以相同的行为运行代码。在控制台中使用变量，如

$E

，需要在运行代码之前手动选择元素，这是不够的。

组件只是一个视图，因此以下操作应有效：

Ember.View.views[]

在你的例子中：

Ember.View.views['ember592']

如果要修改/读取

值

属性，则需要使用get/set，例如：

Ember.View.views['ember592'].get（'value'）

---

Ember.View.views['ember592'].set（'value'，'newValue'）

如果我错了，请纠正我，但您似乎没有使用（在上和作为可用）

一旦你安装了它，就可以很容易地检查调试和修改任何与余烬相关的东西，为了这个答案，我将使用chrome版本

在运行ember应用程序的选项卡中打开chrome开发工具， 一旦有了，就转到开发人员工具中的ember选项卡

要查看组件，必须勾选复选框

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

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

要从控制台访问这些属性，只需单击组件旁边的

$E

单击后，您应该会在控制台中看到类似的内容

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

现在，要获取属性值，需要执行的所有操作：

$E.get('myProperty');

并设置它们：

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

---

找到了一个适用于Ember 2.13的要点

App.__container__.lookup('-view-registry:main')[componentId]; // componentId i.e. "ember4322"

---

归功于ngyv:

你能链接到有问题的网站吗？另外，如果更新value属性有效，那么我假设您可以使用纯javascript（在Ember之外）更新该值，然后在必要时触发Ember期望的任何事件（如果有）？出于隐私原因，我无法链接到此特定站点，抱歉。我很乐意通过纯JS进行更新，但至今无法做到<代码>余烬.lookup.$E.container.lookup（“MYAPP@component：zipcode字段“）在console中不允许编辑

值

属性/不更新UI或模型。您的评论中的余烬代码有什么意义？为什么不直接使用

document.querySelector

来设置值呢？像

document.querySelector（'input[placeholder=“zip code goes here”]”），值='94109'在控制台中输入注释中的余烬代码似乎选择了正确的元素，但无法设置/更新余烬模型（很抱歉，它可能会实际更新UI，但不会更新模型的其余部分，通常会通过手动输入字段进行更新）。它没有通过css/xpath指向的唯一标识符，只有余烬生成的ID…明白了，如果您找到一个公共示例，请告诉我。您可能是对的，没有余烬，您无法以编程方式识别正确的元素，但根据我的经验，总有一些东西可以作为它的基础。。。“哦，这门课上，它总是紧挨着静态文本，或者它总是广告后的第四个元素。”感谢你给出了这个非常详细的答案。请参阅原始问题中我的更新，了解为什么
$E
在这种情况下没有帮助。第一行说明“使用Ember调试Chrome扩展”-这与余烬检查器不同吗？@leon如果你使用类似jQurry的东西来查找对象并提取其ID属性，那么你可以在我的回答中使用该方法。啊，我的错，你可以通过属性为组件设置唯一的ID。然后你又说你不能触摸代码：/我似乎不明白为什么有人需要通过控制台而不是通过ember InspectorTanks来修改组件值，这看起来像是我想要的。我还没有在目标站点上尝试过这一点，但是
ember592
是否会根据添加到DOM中的ember元素的数量轻松更改？是否可以使用您的方法，但目标是
zipcodeField
元素？是的。。您可以使用jQuery之类的工具来查找特定的div（基于类名等），然后提取divs ID属性，即GUID“emberXXXX”，使用inspector的elements选项卡，尝试查找zipcodeField的不同之处，以确定搜索内容。。如果您想手工编写jQuery（或者原始JavaScript表示jQuery不在页面上），请根据原始问题中的注释将打开和关闭标记粘贴到此处的注释中-假设没有可用的ID/类，因为它们都是由ember生成的，我无法控制代码。所以-我可以使用调试工具来定位和修改属性，但我需要一个控制台一行程序，我设想它使用Ember来定位Ember生成的元素。如果是Angular，我会假设执行类似于
App.controller（'controllerName'）.modelName=newValue的操作；App.controller（'controllerName'）。applyOrRefresh
或类似。我使用了类似这样的方法来强制从模型中刷新UI，否则只会在UI与交互时更新。这应该可以工作：var键，view；for（key in Ember.View.views）{View=Ember.View.views[key]；if（View.toString（）.indexOf（'
$E.set('myProperty', newValue);

App.__container__.lookup('-view-registry:main')[componentId]; // componentId i.e. "ember4322"