Ответ на ввод пользователя горит - html - PullRequest
Новая
       51

Ответ на ввод пользователя горит - html

0 голосов
/ 07 мая 2020

Я использую lit- html, и мне кажется, что мне не удается обновить средство визуализации или запустить какую-либо функцию при вводе пользователем. Я хочу проверить поле ввода при наборе текста. Я не могу найти в Интернете никаких примеров, показывающих реакцию на ввод данных пользователем.

Вот полный код.

my_input.ts 

import {html, directive, Part} from 'lit-html';

const stateMap = new WeakMap();
export const stateManager = directive(() => (part: Part) => {
    let mystate: IInputData = stateMap.get(part);
    if(mystate === undefined)
    {
        mystate = {
            auto_id: Math.floor(Math.random() * 100000 + 1),
            helper_eval: "",
            input_message: "",
            tab_index: 0,
            input_value: "",
            span_message: "",
        }
        stateMap.set(part, mystate);
    }
    else {
        console.log("Hey");
        part.setValue(mystate);
        part.commit();
    }
});
export interface IInputData {
    auto_id: number,
    helper_eval: string,
    input_message: string,
    tab_index: number,
    input_value: string,
    span_message: string
}
export let my_input = () => {
    let d: IInputData = stateManager() as unknown as IInputData;
    return html`
    <section>
        <label for="${d.auto_id}" 
            title="${d.helper_eval}">
            ${d.input_message} &#x24D8
            <span class="float_left">
            ${d.span_message}
            </span>
        </label>
        <input id="${d.auto_id}" 
            tabindex="${d.tab_index}" value="${d.input_value}">
        </input>
    <section>
    `;
}

app.ts 


const myTemplate = () => html`
  <div>
    ${renderCounter(0)}
  </div>`;

const renderCounter = directive((initialValue) => (part: any) => {
    if(part.value === undefined)
    {
        part.setValue(initialValue);
    }
    else { part.setValue(part.value +1)}
  }
 );
export let app = (data: TemplateResult[]) => html`
        ${data}
    `;
render(app([my_input(), myTemplate]), document.body);

Я включил пример подсчета рендеринга и не вижу увеличения счетчика рендеринга при вводе в поле ввода. Я также не уверен, как добавить хуки, чтобы отреагировать на IInputData это изменение в этом шаблоне. Лучше всего добавить в директиву stateManager некую функцию обратного вызова.

1 Ответ

0 голосов
/ 07 мая 2020

Если вы ищете базовое c использование lit- html, продолжайте читать. Если вы пытаетесь понять, как реализовать настраиваемую директиву, я надеюсь, что кто-то другой сможет ответить на нее за вас. Кроме того, я не знаю Typescript, поэтому мой ответ ниже представляет собой простой JavaScript.

Идея lit- html заключается в том, чтобы вы вызывали функцию render() каждый раз, когда вы хотите обновить HTML. Он не обновляет свои выходные данные самостоятельно.

Итак, чтобы использовать его с элементом ввода, вам необходимо реализовать функцию обратного вызова для обновления зависимой структуры данных шаблона и для повторного рендеринга. Обратный вызов должен быть прикреплен к вашему шаблону с помощью @ input / @ change / @ click et c.

Вот простой пример (частично основанный на вашем): 

// create a data object containing the template variables
const data = {
  span_message: "input text copy appears here"
}

// callback function for the input event
const inputCallback = (evt) => {
  // update the template data
  d.span_message = evt.target.value;
  // re-render the template
  render(myTemplate(data), document.body);
 };

// function to generate a template 
// d - data object, which controls the template
const myTemplate = (d) => html`
  <input 
    @input=inputCallback
  </input>
<span>
  ${d.span_message}
</span>`;

// initial rendering of the template
render(myTemplate(data), document.body);

Hope это помогает

...