Как получить доступ к классам из модуля импортированных литералов шаблона? - PullRequest
Новая
       0

Как получить доступ к классам из модуля импортированных литералов шаблона?

2 голосов
/ 19 марта 2019

Импортирующий модуль с литералами шаблона внутри может обращаться только к глобальным переменным. Как получить доступ к переменной из класса?

template.js (класс таргетинга) 

export var literal = {
        base: `<h1>${ foo.copy.ternary }</h1>
                <div>${ foo.copy.title }</div>
                `
   }

index.html (В приведенном ниже примере я получаю ReferenceError: Не могу найти переменную ) 

<!DOCTYPE html>
<html>
    <body>
        <div id=host></div>
    </body>

    <script type="text/javascript">

        class Foo {
            constructor() {
                this.copy = {
                    title: 'Discovering Template Literals',
                    subtitle: 'Effortless client-side rendering awaits.',
                    body: 'You will never want to go back to normal strings again.',
                    ternary: 'Ternary Condition'
                };
            };
        };


    </script>

    <script type="module">

        let foo = new Foo();

        import * as templates from './templates.js'
        document.getElementById( "host" ).innerHTML = templates.literal.base;

    </script>

</html>

template.js 

export var literal = {
        base: `<h1>${ copy.ternary }</h1>
                <div>${ copy.title }</div>
                `
   }

index.html ( работа с глобальной переменной ) 

<!DOCTYPE html>
<html>
    <body>
        <div id=host></div>
    </body>

    <script type="text/javascript">

        var copy = {
                    title: 'Discovering Template Literals',
                    subtitle: 'Effortless client-side rendering awaits.',
                    body: 'You will never want to go back to normal strings again.',
                    ternary: 'Ternary Condition'
        };

    </script>

    <script type="module">

        import * as templates from './templates.js'
        document.getElementById( "host" ).innerHTML = templates.literal.base;

    </script>

</html>

1 Ответ

4 голосов
/ 19 марта 2019

Ваш 

export var literal = {
        base: `<h1>${ foo.copy.ternary }</h1>
                <div>${ foo.copy.title }</div>
                `
}

будет интерполировать результат оценки foo.copy.ternary и т. Д. В составную строку, которая присваивается свойству base.Но foo не входит в область действия модуля, поэтому будет выдана ошибка, при запуске модуля .

Вместо экспорта литерала шаблона (который будет таким же, какэкспорт статической строки, без ошибок), экспорт функции , которая принимает foo в качестве параметра, оценивает литерал шаблона в функции и возвращает построенную строку: 

export var literal = {
  base(foo) {
    return `<h1>${ foo.copy.ternary }</h1>
            <div>${ foo.copy.title }</div>
            `;
  }
}

Затем позвоните по этому номеру: 

document.getElementById( "host" ).innerHTML = templates.literal.base(foo);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...