Question

对于以下内容为何无效的情况有些困惑。我已经尝试过在不将参数传递给函数的情况下进行更新，但可以使UI更新，但是如果我将参数传递给它并对其执行相同的操作，它将在代码中更新它，并且可以进行console.log记录。退出，但用户界面未更新。

这有效：

<script>
   import { text, toggle_class } from "svelte/internal";

   let line1 = {name:"line 1", display:"some text here", originalText:"some init text", visible:true};

function toggleView(){ 
    line1.visible = !line1.visible;
    if(!line1.visible) line1.display = "*************"
    else line1.display = line1.originalText
};
</script>

<main>
    <button on:click="{toggleView}">{line1.display}</button>
</main>

这不起作用：

<script>
   import { text, toggle_class } from "svelte/internal";

   let line1 = {name:"line 1", display:"some text here", originalText:"some init text", visible:true};

function toggleView(field){ 
    field.visible = !field.visible;
    if(!field.visible) field.display = "*************"
    else field.display = field.originalText
};
</script>

<main>
    <button on:click="{toggleView(line1)}">{line1.display}</button>
</main>

我认为这可能是因为我要从Svelte的角度将其分配给局部变量，但是我不确定如何调用该函数以使其可重用，因为我会在很多时候这样做行。

任何帮助将不胜感激。

更新-已解决

以下根据托马斯的答案进行工作：

<script>
    import { text, toggle_class } from "svelte/internal";
    var lines = {
        line1: {
            name: "line 1",
            display:"some text here",
            originalText:"some init text",
            visible:true
        }
    };
    
    function toggleView(field) {
        return function() {
            lines[field].visible = !lines[field].visible;
            if (!lines[field].visible) {
                lines[field].display = "*************";
            } else {
                lines[field].display = lines[field].originalText;
            }
        }
    }
</script>

<main>
    <button on:click="{toggleView('line1')}">{lines.line1.display}</button>
</main>

Answer 1

将1设置为function runTogether1() { // Initial Call, create elements if (i === 0) { addDiv(); addDiv2(); addDiv3(); addbutterfly(); } else { var img = document.getElementByTagName('img')[0]; if ((i % 2) === 0) { img.src = 'even-image-src.jpg'; } else { img.src = 'odd-image-src.jpg'; } } }时，该函数将立即执行，就好像您将其设置为on:click而不是其他函数中的toggleView(line1)一样，工作示例。

您有两种方法可以解决此问题。最常见的方法是将toggleView()处理函数转换为lambda /匿名函数：

toggleView

另一种较不常见的方法是修改处理程序函数并将其转换为咖喱函数：

on:click

在这种情况下，<button on:click="{() => toggleView(line1)}">{line1.display}</button>将返回绑定到单击处理程序的函数，并且该函数实际上将在单击按钮时执行。

Answer 2

在原始HTML + JS中，内嵌事件处理程序（例如onclick）实际上是事件发生时将执行的一些代码。特别是，如果在处理程序中使用函数，则必须调用它：

示例（不苗条）：

<button onclick="toggleView()" />

相比之下，在Svelte中，事件处理程序应该是一个函数，在事件发生时将被调用。

好，因为toggleView是一个函数：

<button on:click={toggleView} />

不好，因为每次渲染标记时（即，当无功变量发生变化时）它都会调用toggleView()，并且_ togggleView()的返回值绑定到click事件：

<button on:click={toggleView()} />

如果您需要将局部参数传递给事件处理程序，则需要 wrap 该函数仍然可以获取所需的信息（整个事件在事件发生时调用，而不是在标记时调用重新发布）：

示例，确定+参数：

<button on:click={() => toggleView(line1)} />

请注意，此处的处理程序为() => toggleView(line1)，而不是toggleView(line1)。

将值传递给函数时，苗条的值不会在屏幕上更新

2 个答案: