Discourse toolkit to render forms

[merefield (Robert)]

Да, это может сработать. Я попробую.

Кажется, я искал вариант, «нативный для фреймворка», но это определённо вполне разумная альтернатива. Спасибо.

[merefield (Robert)]

@system

Изображение

Отрисовывает компонент <UppyImageUploader />.

Обработка загрузки

По умолчанию компонент создаёт объект загрузки. Часто требуется получать только URL и идентификатор загрузки. Для этого можно использовать свойство @onSet поля:

@action
handleUpload(upload, { set }) {
  set("upload_id", upload.id);
  set("upload_url", getURL(upload.url));
}

<Form as |form|>
  <form.Field
    @name="upload"
    @title="Загрузка"
    @onSet={{this.handleUpload}}
    as |field|
  >
    <field.Image />
  </form.Field>
</Form>

Этот пример вызывает у меня следующую ошибку:

validateConfig - uppy-upload.js:80:12

Error: Missing required UppyUpload config: type

Uncaught (in promise) Error: Missing required UppyUpload config: type
    validateConfig uppy-upload.js:80
    UppyUpload uppy-upload.js:113
    js uppy-image-uploader.gjs:32
    UppyImageUploader uppy-image-uploader.gjs:23
    createComponent base-component-manager.js:26
    Ember 2
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:98442
    Ember 12
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:100412
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:102123
    Ember 34
    show modal.js:73

Я подозреваю, что <field.Image /> требует аргумент @type

[merefield (Robert)]

Итак, ситуация с загрузкой изображений становится ещё более странной.

Иногда при открытии диалогового окна выбора файла для загрузки изображения через элемент управления формы я получаю эту ошибку:

selectedText - utilities.js:137:25
TypeError: ancestor is null

 const postMenuArea = ancestor.querySelector(".post-menu-area");

    <form.Field
      @name="upload_url_1"
      @title="Загрузить"
      @onSet={{this.handleUpload}}
      as |field|
    >
      <field.Image @type="branding"/>
    </form.Field>

Это особенно странно, так как моя форма находится в модальном окне, которое никак не связано с постами.

Всё в итоге работает, просто в консоли браузера это выглядит немного некрасиво.

Всего наилучшего!

[pfaffman (Jay Pfaffman)]

@awesomerobot

Кажется, импорт формы был указан неверно, поэтому я обновил оригинальный пост.

Но вы не обновили оригинальный пост, или изменения были отменены. И мне снова пришлось тратить время, чтобы разобраться в этом — больше раз, чем я готов признать.

@system

Вот самый простой пример формы:

import Component from "@glimmer/component";
import { action } from "@ember/object";
import Form from "discourse/form";

Эти руководства находятся на GitHub? Правильно? Если да, могли бы они добавить ссылку на GitHub?

[awesomerobot (Kris)]

Ах да, я не знал, что эта тема была создана из нашего репозитория документации, поэтому она была отменена, и я так и не продолжил… сейчас уже готовится правильное исправление

[pfaffman (Jay Pfaffman)]

Спасибо!

Ещё одно решение — добавить компонент темы в исходный код, чтобы вы больше не могли ошибочно внести изменения в неправильное место, и я мог бы отправить pull request.

[david (David Taylor)]

@pfaffman

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

Мы скрываем кнопку редактирования в темах Documentation > Developer Guides, но, думаю, люди обходят это с помощью сочетаний клавиш или быстрого редактирования. Нужно скрыть/отключить ещё больше вещей!

@pfaffman

Я мог бы отправить PR.

Внизу каждой документации у нас есть ссылка на исходный файл. Так что, если вы хотите отправить PR, лучше всего использовать именно это:

@system

Этот документ находится под контролем версий — предложите изменения на GitHub.

[pfaffman (Jay Pfaffman)]

@david

Но, думаю, люди обходят это, используя сочетания клавиш или быстрое редактирование.

Ах. Понятно. Кроме того, правила часто не применяются к администраторам.

@david

У нас это есть в конце каждого документа

Подождите. Что?

@system

Этот документ находится под контролем версий — предлагайте изменения на GitHub.

Ох. Ой. Написано мелким шрифтом, но теперь, когда я это вижу, я вспоминаю, что уже встречал это раньше.

В этот раз я добился ещё большего прогресса. Я занимаюсь довольно кастомными вещами (например, мне нужно вызывать текст, который отображается при вводе в поле), что может помешать мне использовать это.

Не знаете, как вызвать функцию при вводе в поле? (Пример использования: когда вы вводите ключ API Digital Ocean, появляется текст с описанием того, как получить этот ключ).

РЕДАКТИРОВАНИЕ: Да, конечно! Сайт https://ask.discourse.com/ смог мне подсказать! Как только знаешь, это кристально очевидно.

import { on } from "@ember/modifier";
...
  @action
  hostnameClicked(event) {
    this.setHelpText(i18n("pfaffmanager.help.hostname"));
  }
...
            <field.Input @type="text" {{on "click" this.hostnameClicked}} />

[merefield (Robert)]

@system

validateUsername(name, value, data, { addError }) {

Это неверно — должно быть validateUsername(name, value, { data, addError }) {, иначе возникнет ошибка деструктуризации.