如何在 svelte 3 中强制渲染? [英] how to force rendering in svelte 3?
问题描述
我有一个带有输入字段的表单.当我键入 (keyup) Enter 键时，必须清除这些字段之一.我知道我可以将此字段作为受控字段处理(意味着侦听 keyup 并维护该字段的副本)，或者使用双向绑定，但在我的用例中我不能这样做后者，我宁愿不做前者.因此，我的问题是，如何强制渲染 Svelte 组件?
I have the case of a form with input fields. One of those fields must be cleared when I type (keyup) the Enter key. I know I can handle this field as a controlled field (meaning listening on keyup and maintain a copy of the field), or alternatively use two-way binding, but in my use case I can't do the latter, and I'd rather not do the former. My question is thus, how can I force rendering of a Svelte Component?
通常情况下，表单显示为 Enter 键，我会就像 app.set(field, value) 将字段重置为 value 一样，即使在 Svelte 看来，field 属性还没有改变了.这可能吗?
Typically, the form is displayed with <Component field="value" />, the user modifies the field and clicks the Enter key, and I would like app.set(field, value) to reset the field to value, even and when, to Svelte's eyes, the field property has not changed. Is that possible?
我尝试失败的一个转变是更新 Svelte 组件内部的属性，希望当 app.set(field, value) 时，Svelte 会看到field 属性的两个不同值并更新组件.但这似乎不起作用:
A turn around I tried unsucessfully consists in updating the property inside the Svelte component, with the hope that when app.set(field, value), Svelte will see two different values for the field property and update the component. But that did not seem to work:
<script>
const watchForEnter = ev => {
if (ev.keyCode === 13) {
ev.preventDefault();
const formData = new FormData(ev.target.closest("form"));
const tag = formData.get("tag");
dispatch({ [ADDED_TAG]: tag });
}
};
const updateCurrentTag = ev => {
currentTag = new FormData(ev.target.closest("form")).get("tag");
console.log(`currentTag!`, currentTag)
}
</script>
<form>
<fieldset class="form-group">
<input
name="tag"
class="form-control"
type="text"
placeholder="Enter tags"
on:input={updateCurrentTag}
value={currentTag}
on:keyup={watchForEnter} />
</fieldset>
</form>
推荐答案
我相信我已经找到了一个优雅的解决方案来解决当组件的数据在其范围之外发生更改时强制更新的问题.
I believe I've found an elegant solution to the problem of forcing a component to update when its data has been changed outside of it's scope.
main.js;在线示例中的原版，无特殊更改:
main.js; vanilla from the examples online, no special changes:
import App from './App.svelte';
var app = new App({
target: document.body
});
export default app;
index.html;注意 window.neek = {...}:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Svelte app</title>
<script>
window.neek = { nick: true, camp: { bell: "Neek" }, counter: 0 };
</script>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
App.svelte;注意 $: notneek = window.neek 和 window.neek.update = ...:
<script>
let name = 'world';
$: notneek = window.neek;
function handleClick() {
notneek.counter += 1;
}
window.neek.update = function () {
notneek = notneek;
}
</script>
<h1>Hello { notneek.camp.bell }!</h1>
<button on:click={handleClick}>
Clicked {notneek.counter} {notneek.counter === 1 ? 'time' : 'times'}
</button>
由于update 函数在App.svelte 的范围内，所以通过window.neek.update 调用时可以强制重新渲染().此设置使用 window.neek.counter 作为按钮使用的内部数据(通过 notneek.counter)并允许深层属性(例如 neek.camp.bell = "ish") 在组件外部更新并在 neek.update() 被调用后反映.
Since the update function is within the scope of App.svelte, it is able to force the re-render when called via window.neek.update(). This setup uses window.neek.counter for the internal data utilized by the button (via notneek.counter) and allows for the deep properties (e.g. neek.camp.bell = "ish") to be updated outside of the component and reflected once neek.update() is called.
在控制台中，输入 window.neek.camp.bell = "Bill" 并注意 Hello Neek! 尚未更新.现在，在控制台中输入 window.neek.update()，UI 将更新为 Hello Bill!.
In the console, type window.neek.camp.bell = "Bill" and note that Hello Neek! has not been updated. Now, type window.neek.update() in the console and the UI will update to Hello Bill!.
最重要的是，您可以在 update 函数中进行任意细化，以便只同步您想要同步的部分.
Best of all, you can be as granular as you want within the update function so that only the pieces you want to be synchronized will be.
这篇关于如何在 svelte 3 中强制渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
