Как представить функцию в svelte, которая может принимать параметры для рендеринга?

Я новичок в svelte, и для моего случая использования я хотел бы экспортировать приложение svelte как bundle.js, которое предоставляет функцию, скажем startApp(positionInject, appConfiguration), которая может принимать 2 параметра (positionInject - это позиция для инъекции приложения, например: .app, appConfiguration is начальная конфигурация приложения для запуска), на основе этих параметров тонкое начало рендеринга приложения.

Мне интересно, это возможно в стройном?

Ценю любую помощь.


svelte svelte-3 ecmascript-6
person CaptainZero    schedule 07.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Каждый компонент Svelte принимает target элемент и props в качестве параметров конструктора. Вы можете обернуть конструкцию функцией:

import App from './App.svelte';

export function startApp(selector, props) {
  const target = document.querySelector(selector)

  return new App({
    target,
    props
  })
}

И назвать это можно так:

import {startApp} from "./bundle.js"

startApp(".my-app", {config: ...})
person joshnuss    schedule 08.12.2019
comment
При многократном вызове startApp('.app', {config:..}) создается еще один экземпляр приложения. Было бы здорово, если бы вы пролили свет на то, как заменить существующее приложение при повторном вызове startApp. Заранее спасибо - person CaptainZero; 08.12.2019
comment
Пара способов сделать это: 1) Сохраните Map элементов в компонентах, чтобы вы знали, был ли он уже загружен 2) Установите флаг на узле DOM после загрузки: component = new App(...); target.svelteLoaded = true, а затем проверьте, установлен ли target.svelteLoaded. - person joshnuss; 08.12.2019
comment
Спасибо, понятно, мне нужно было бы заменить существующее приложение новым, не проверяя и не загружая новое. - person CaptainZero; 08.12.2019
comment
В моем случае приложение svelte будет в iframe, и новая конфигурация (реквизиты) часто передается startApp. Поэтому мне нужно заменить существующее приложение новой конфигурацией на startApp. Надеюсь, вы понимаете. Заранее спасибо. - person CaptainZero; 08.12.2019
comment
Понятно. В этом случае вы можете использовать $set() для обновления свойств существующего смонтированного приложения. См .: svelte.dev/docs#$set - person joshnuss; 08.12.2019
comment
Большой! Большое вам спасибо за вашу помощь. Он идеально подходит для моего случая использования. Вы порекомендуете какой-нибудь курс для стройных, чтобы запачкать руки в стройных? Спасибо еще раз. - person CaptainZero; 08.12.2019
comment
Учебник на svelte.dev/tutorial действительно хорош. Работаю над видеокурсом, но ссылки пока нет ???? - person joshnuss; 08.12.2019