用XHR自动更新细长JSON

z4bn682m 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(111)

我对Svelte（或其他JavaScriptReact框架）完全是新手。我只使用jQuery工作了几年。让我们假设，我有以下数组和一个格式化器函数...

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函数来显示格式化的数据的常见方法是什么呢？
最初，它可以工作，如果有按钮单击事件，它也可以工作，但是当数组在没有间隔获取交互的情况下更改时，它就不工作了。
我当时在想，我需要一个新的数组，其中包含格式化的值并显示它们--这是可行的，但我想知道，这是否是常用的方法？
我需要的数据未格式化，这样我就可以在客户端执行一些计算，所以我不能拿起他们格式化。
因此，当我分配新数组时，让我们称它们为带格式化值的数组，然后一切都能正常工作，但我还不确定，当通过XHR从轮询或Web套接字更新数据时，这是否是解决此问题的常用方法

JSON

来源：https://stackoverflow.com/questions/75243529/automatically-updating-svelte-json-with-xhr

1条答案

按热度按时间

ovfsdjhp1#

因此，假设您有2个数组，它们都可以独立更新，并且您需要显示合并的结果。
创建3个细长的商店，2个为您的原始阵列和1个为衍生合并阵列。
每次更改其中一个原始存储区时，都将重新计算派生存储区（假定它有订阅服务器）。
stores.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
        }
    });
})

在你的组件中迭代你的结果数组。因为你是在迭代派生存储区，所以原始数组中的所有改变都将触发重新呈现。
SecuritiesList.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}

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

<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}

赞(0）回复(0）举报 2023-01-27

我来回答

用XHR自动更新细长JSON

1条答案

相关问题

热门标签

最新问答