使用 XHR 自动更新 svelte JSON

Question

我对 Svelte（或其他 JavaScript 反应式框架）完全陌生。 我只使用 jQuery 工作了多年。让我们假设，有以下 arrays 和格式化程序 function...

let quotes = [{
  "key": "moonpie",
  "price": 2.22222222,
  "dif": 1.009
} ....]

let securities = [{
  "key": "moonpie",
  "stock": 200
} .....]

function updateQuotesWithinInterval {
  ... do some stuff, get the data ...
  quotes = json;
}

function formatNumber(value, options) {
  // 2.2222222 comes in, 2.22 EUR goes out
  // 1.000007 comes in, +1.00% goes out ....
  return formatted value;
}

{#each securities as security}
  Name: {security.key}<br />
  Price: {formatNumber(quotes[security.name].price, someoptionhere)}<br /> --> 2.22 EUR formatted
  Credit: {formatNumber(securities.stock * quotes[securities.name].price, someoptionshere}<br /> --> 2000 * 2.222222222 = 4,444.44 EUR formatted
  Change: {formatNumber(quotes[security.name].change, someoptionhere)}<br /> --> +1.01% formatted
{/each}

那么，常见的方法是在foreach语句中通过XHR更新后调用JavaScript function格式化数据显示？

最初它可以工作，并且可以使用按钮单击事件，它也可以，但是当数组在没有间隔获取交互的情况下更改时不起作用。

那时我在想，我需要一个包含格式化值并显示它们的新数组 - 这可行，但我想知道，这是否是通用方法？

我需要未格式化的数据，以便我可以在客户端执行一些计算，所以我无法将它们格式化。

所以，当我分配新数组时，让我们用格式化的值调用它们 arrays，然后一切正常，但我还不确定，这是否是解决这个问题的常用方法，当通过 XHR 从轮询或 web sockets 更新数据时

Answer 1

因此，假设您有 2 个 arrays，它们都可以独立更新，并且您需要显示合并结果。

创建 3 个 svelte 存储，2 个用于原始 arrays，1 个用于派生的合并数组。

每次您更改其中一个原始商店时，都会重新计算派生商店，假设它有订阅者。

商店.js

import { derived, writable } from "svelte/store";

/** @type {SvelteStore<{key: string, price: number, dif: number}[]>} */
export const quotes = writable([]);

/** @type {SvelteStore<{key: string, stock: number}[]>} */
export const securities = writable([]);

/** @type {SvelteStore<{key: string, stock: number, price:number, dif:number }[]>} */
export const securities_with_quotes = derived([quotes, securities], ([$quotes, $securities]) => {
    return $securities.map((security) => {
        let quote = $quotes.find(q => q.key == security.key);
        return {
            ...security,
            ...quote
        }
    });
})

遍历组件内的结果数组。 因为您正在迭代派生存储，所以原始 arrays 中的所有更改都将触发重新呈现。

证券清单.svelte

<script>
import {securities, quotes, securities_with_quotes } from "./stores.js";
import Price from 'Price.svelte'

function updateQuotesWithinInterval {
  ... do some stuff, get the data ...
  $quotes = json;
} 

</script>

{#each $securities_with_quotes as security}
    Name: {security.key}
    Price: <Price value={security.price}/>
    Credit: <Price value={security.price * security.stock}/>
    Change: <Price value={security.dif}/>
{/each}

将价格及其所有显示逻辑隔离在一个单独的组件中也是一个好主意。

价格.苗条

<script>
export let value = 0;

function formatNumber(value, options) {
  // 2.2222222 comes in, 2.22 EUR goes out
  // 1.000007 comes in, +1.00% goes out ...
  return formatted_value;
}

$:displayValue = formatNumber(value)
</script>

{displayValue}