Как получить доступ к известному компоненту Ember с консоли

Используя Ember debug расширение Chrome, я идентифицировал этот компонент на веб-сайте, который я пытаюсь автоматизировать (но не имею прямого доступа для изменения кода):

<[email protected]:zipcode-field::ember592>

Что показано в иерархии как:

application
    engine
        myui
            zipcodeField

Если я отредактирую свойство value этого элемента в отладчике, он обновит интерфейс и модель по желанию. Могу ли я сделать это с помощью однострочного интерфейса с консоли?

Обновление: до сих пор я могу ввести это в консоль:

Ember.lookup.$E.container.lookup("[email protected]:zipcode-field")

Но не удается получить доступ/изменить его свойство value, как в отладчике.

Update:

В обратной связи с одним из ответов моя цель - иметь консольный однострочный, который может быть предоставлен кому-либо без каких-либо отладчиков, установленных для запуска кода с таким же поведением. Использование переменной, такой как $E в консоли, требует, чтобы элемент был выбран вручную до запуска кода, что было бы недостаточно.

Ответы

Ответ 1

Исправьте меня, если я ошибаюсь, но кажется, что вы не используете firefox и как bookmarklet).

После того, как вы установили это, очень легко проверить отладку и изменить все, что связано с ember, для этого ответа я буду использовать версию chrome.

Откройте свои инструменты chrome dev на вкладке, в которой работает ваше приложение ember, после того, как они отправляются на вкладку ember в инструментах разработчика.

Чтобы увидеть компоненты, вам необходимо отметить галочку

enable components

После включения вы сможете увидеть все используемые в настоящее время компоненты.

Щелчок по компоненту откроет панель, содержащую все свойства компонента.

property panel

Чтобы получить доступ к этим свойствам из консоли, вам нужно только нажать $E рядом с компонентами.

После нажатия вы увидите что-то подобное на консоли.

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

Теперь все, что вам нужно сделать, чтобы получить значения свойств:

$E.get('myProperty');

И Чтобы установить их:

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

Ответ 2

Компонент - это просто представление, поэтому следующее должно работать:

Ember.View.views[<GUID>]

Итак, в вашем примере:

Ember.View.views['ember592']

Вам нужно использовать get/set, если вы хотите изменить/прочитать свойство value, например:

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

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