javascript - 对象中的计算值 | 苗条
问题描述
我正在编写一些项目来学习 Svelte,并且我一直在尝试制作类似于电子表格的东西,用户可以在其中键入或更改数字,并使用预定义的公式进行一些微积分(用户无法更改公式)。我已经尝试过,但我不能被动地做到这一点。
为此,我创建了一个名为 Spreadsheet 的组件,它有两个道具,数据和列,类似于 Quasar 为Tables所做的事情。
这是带有示例的 REPL。
这个想法是用户更改列上的值,并通过公式反应性females, males and area
地更改列的值。density
poblationDensity
/* App.svelte */
<script>
import Spreadsheet from "./Spreadsheet.svelte";
const poblationDensity = (females, males, area) => {
return (females + males) / area;
};
let data = [
{
"id": 1,
"animal": "White-mantled colobus",
"females": 13,
"males": 33,
"area": 109
},
{
"id": 2,
"animal": "Woodpecker, red-headed",
"females": 99,
"males": 88,
"area": 252
},
{
"id": 3,
"animal": "White-necked raven",
"females": 34,
"males": 36,
"area": 362
},
{
"id": 4,
"animal": "Baleen whale",
"females": 24,
"males": 67,
"area": 457
},
{
"id": 5,
"animal": "Tiger",
"females": 89,
"males": 20,
"area": 476
},
{
"id": 6,
"animal": "White spoonbill",
"females": 56,
"males": 85,
"area": 358
},
{
"id": 7,
"animal": "Giant anteater",
"females": 83,
"males": 98,
"area": 236
},
{
"id": 8,
"animal": "White-fronted capuchin",
"females": 72,
"males": 44,
"area": 163
},
{
"id": 9,
"animal": "Raccoon, crab-eating",
"females": 78,
"males": 61,
"area": 410
},
{
"id": 10,
"animal": "Turtle, long-necked",
"females": 5,
"males": 77,
"area": 472
}
];
const cols = [
{
name: "id",
label: "#"
},
{
name: "animal",
label: "Animal"
},
{
name: "females",
label: "Females"
},
{
name: "males",
label: "Males"
},
{
name: "area",
label: "Area"
},
{
name: "density",
label: "Density",
computed: {
args: ["females", "males", "area"],
method: poblationDensity
}
}
];
</script>
<main>
<Spreadsheet {data} {cols} />
</main>
/* Spreadsheet.svelte */
<script>
export let data = [];
export let cols = [];
</script>
<style>
.numeric {
width: 70px;
}
</style>
<table>
<tr>
{#each cols as col}
<th>{col.label}</th>
{/each}
</tr>
{#each data as item}
<tr>
{#each cols as col}
<td>
<input type="text" class="{col.name !== 'animal' && 'numeric' }"
value={col.computed ? 0 : item[col.name]}
/>
</td>
{/each}
</tr>
{/each}
</table>
解决方案
很好的例子!
因此,首先要做的是实际连接您的计算功能,即连接poblationDensity
到显示的内容。我们可以像这样更改您的<input >
字段的值:
value={col.computed ? col.computed.method(item) : item[col.name]}
我已经稍微调整了您的功能以使其工作:
const poblationDensity = ({ females, males, area }) => {
return (females + males) / area;
};
有了这个,我们得到了正确的显示。现在我们需要获取值。
在 Svelte 中,获取 an 值的最常见方法<input />
是双向绑定。它也适用于对象属性!
在我们的例子中,我们需要绑定到字段的值,所以bind:value={...}
. 让我们将其添加到我们的示例中。为此,我们需要为只读(计算)值分离标记:
{#if col.computed}
<input
type="text"
class={col.name !== 'animal' && 'numeric'}
value={col.computed.method(item)} />
{:else}
<input
type="text"
class={col.name !== 'animal' && 'numeric'}
bind:value={item[col.name]} />
{/if}
还有……好吧,我们来了!缺失完成!更新了 REPL
每次更新一个值时,bind:value
都会在data
数组中更新它。Svelte 知道此更改并相应地重新呈现受影响的行。此时,计算值被重新计算。
另一种方法是使用一个中间数组来保存计算值。为此,Svelte 提供了响应式声明和语句。他们的外星人外观让他们一开始有点吓人,但一旦你习惯了他们,他们就会感觉像魔法一样!
推荐阅读
- python - Python:如何拆分和重新加入一系列字符串中的第一项和最后一项
- notepad++ - 我们如何用不同的值替换多个地方的相同值
- c# - 带有 Swagger 的 Asp.Net.Core webapi 的 Xml 文档
- oauth-2.0 - Azure MFA 和不记名令牌
- php - 使用 PHP 运行 linux shell 脚本
- r - R脚本多元回归中的错误观星者
- python - 用于搜索和显示列标题的 Python 代码
- excel - 如何将工作簿 1 的工作表 1 中的数据复制到工作簿 2 的工作表 2?
- html - 如何将类属性添加到`
- ` Rmarkdown中自动目录中的标签?
- time - 虽然它是错误的,但它不起作用