Как получить LitElement или Lit Html для рендеринга шаблонов из строки - PullRequest
Новая
       43

Как получить LitElement или Lit Html для рендеринга шаблонов из строки

0 голосов
/ 25 марта 2020

Вот кое-что, что я должен сделать. У меня есть компонент поля, который может реализовывать различные типы виджетов.

У меня есть типичное представление, которое выглядит следующим образом: 

<form model="model" record_id="record_id">
  <field name="title" />
  <field name="body" widget="text"/>
</form>

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

В этом случае spe c выглядит как примерно так: 

{
  title: {
    type: 'string',
    widget: 'char'
  },
  body: {
    type: 'string',
    widget: 'text',
  }
}

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

Я пытался с этим: 

render () {
    return html`
      <${this.widget} @change=${update_value}></${this.widget}>
    `
}

И с этим: 

render () {
    return html`
      <div is=${this.widget} @change=${update_value}></div>
    `
}

Но единственное, что смехотворно работает, это: 

render () {
    this.innerHTML = `<${this.widget}></${this.widget}>`
    return html`<div><slot></slot></div>`
}

Недостатком этого является то, что я не могу автоматически связывать onChange событие для ребенка, так как это виджет, который будет привязываться к его parentField. В идеале я хотел бы иметь возможность использовать виджет напрямую, который позволил бы компоненту Field отображаться непосредственно на выбранный набор событий, которые может запускать виджет, вместо того, чтобы надеяться, что виджет правильно зарегистрирует себя в поле ...

Есть ли лучший способ сделать это?

1 Ответ

0 голосов
/ 27 марта 2020

<${this.widget} @change=${update_value}></${this.widget}> было бы действительно хорошо, но, к сожалению, это не сработает, пока директива stati c не загорится светом - html (https://github.com/Polymer/lit-html/issues/78)

Вы можете попробуйте использовать директиву unsafe HTML следующим образом: 

const html = unsafeHTML`
  <${this.widget} @change=${update_value}></${this.widget}>
`;

но я боюсь, что этого недостаточно в вашем случае, потому что с этой директивой вы больше не создаете освещенный шаблон, но просто простая строка. Эффективного повторного рендеринга не будет.

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

...