Блог

Главная - Вопросы по программированию - стройный: как выполнить функцию svelte между блоками if?

стройный: как выполнить функцию svelte между блоками if?

#javascript #node.js #svelte

#javascript #node.js #стройный

Вопрос:

Я пытаюсь поместить функцию между блоками if else. ниже то, что я себе представляю, это было бы.:

 <script>
let condition=false
function function_here(event){
   if(event){
      condition = true;
   }else if(!event){
      condition = false;
   }else{
      condition = !condition;
   }
</script>
{#each post as posts}
   {#if posts.object1==="match" }
      <p>HTML HERE</p>
      {function_here(true)}
   {/if}
{/each}
{#if condition}
   <button>type1</button>
{:else}
   <button>type2</button>
{/if}

если только во время цикла post результат, если найденные posts.object1 совпадают, мне нужно изменить статус переменной «условие»

однако этот пример возвращает результат «undefined».

Как мне поместить функцию между блоками if в svelte?

Комментарии:

1. Можете ли вы привести лучший пример? Вы переходите true к нему, поэтому он всегда будет работать condition = true . Я не вижу цели этого. И вы, вероятно, видите, undefined потому что функция ничего не return делает.

2. Может быть, вы действительно хотите заранее вычислить значение с condition = posts.some(post => post.object1 === 'match')

3. это одна из первых вещей, которые вы должны знать о javascript. если функция ничего не возвращает, она вернет undefined . ваша функция ничего не возвращает

4. привет, Феликс. мне нужно возвращать условие обратно в false после каждого цикла post. мне нужно использовать функцию toggle like в какой-то другой части кода, но в этой части мне нужно иметь возможность передавать true, когда post.object1 совпадает. вот почему функция выглядит так.

Ответ №1:

Подобный вызов функций внутри шаблона считается плохой практикой в Svelte, этот код принадлежит скриптовой части компонента. Лучший подход к этой проблеме — реактивная переменная, чтобы она также изменялась, если posts изменяется:

 $: condition = posts.... // something based on posts

Какое условие на самом деле выполняется, зависит от вас, хотя код, который вы указали в своем ответе, кажется очень упрощенным по сравнению с фактическим кодом.

Комментарии:

1. ты предлагаешь делать петли в <script> , pass a posts data into condition first, before do another loop in template? Если нет, то запустить эту строку в шаблон или <script>? если в шаблоне, я думаю, это будет так же, как если бы я пытался поместить функцию в шаблон. но если делать в скрипте, ну, это ничем не отличается от использования обычного js. пожалуйста, поправьте меня, если я ошибаюсь.

Ответ №2:

Вы пытаетесь подойти к этому так, как хотелось бы JSX. Почему бы не абстрагировать эту логику в простой JS внутри <script> ?

 <script>
    let condition = false
    function function_here(event) {
        if (event) {
            condition = true;
        } else if (!event) {
            condition = false;
        } else {
            condition = !condition;
        }
    }

    for (post in posts) {
        if (post.object1 === 'match') {
            function_here(true)
        }
    }
</script>
{#each post as posts}
    {#if post.object1 === "match" }
        <p>HTML HERE</p>
    {/if}
{/each}
{#if condition}
    <button>type1</button>
{:else}
    <button>type2</button>
{/if}

Комментарии:

1. я не думаю, что это может сработать. функция не может запускаться за пределами одного и того же блока цикла, потому что условие будет запускаться несколько раз в реальном коде. для каждого сообщения мне нужно преобразовать условие обратно в false, чтобы я мог правильно использовать функцию переключения (которая является «условием») для правильной работы.

Ответ №3:

Я понимаю, что в других ответах предлагается использовать лучшие практики. Однако, чтобы ответить на общий вопрос о запуске или вызове JS-кода в Svelte в его HTML-частях, можно выполнить следующее.

 <script>
...
</script>

<!-- HTML part -->
{functionCall() || ""}  <-- This avoids 'undefined' showing up in your markup!

Или альтернативно,

 <!-- HTML part -->
{"" ?? functionCall()}  <-- This avoids 'undefined' showing up in your markup!

Ответ №4:

А еще лучше, используйте оператор void. Использование void и оператора Nullish гарантирует, что, даже если ваша функция возвращает значение, в вашей разметке ничего не отображается.

 <!-- HTML part -->
{void functionCall() ?? ""} <-- This avoids any sort of value from showing up in your markup!