使用 XHR 自动更新 svelte JSON-解网

问：

我是 Svelte（或其他 JavaScript 反应式框架）的新手。多年来，我只使用jQuery。让我们假设，ich 具有以下数组和一个格式化程序函数......

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 xmlhttprequest svelte polling

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}

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

价格.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}

上一个：MVC.NET 在 ActionFilterAttribute 中获取完整视图路径

下一个：如何将 .NET 项目名称设置为项目文件夹的名称

使用 XHR 自动更新 svelte JSON

Automatically updating svelte JSON with XHR

评论