javascript observable js input options基于之前选择的输入

eulz3vhy  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(189)

我对可观察的js(或者更确切地说,任何与js / html相关的东西)都很陌生,所以这可能是一个非常愚蠢的问题,我可能没有掌握一些核心概念。我会非常感谢任何提示我错了什么。
我尝试构建两个Inputs,以便查看者可以首先选择他们想要检查的数据集,然后根据他们的数据集选择决定他们感兴趣的变量。我不能让第二个方面工作。
这是我到目前为止编写的代码,当我尝试使用const定义基于数据集的选项时,我得到了一个错误。

viewof dataset = Inputs.select(
  ["Datset 1", "Dataset 2", "Dataset 3"], 
  {label: "Which Dataset would you like to use?", value: "dataset"}
)

viewof variables = Inputs.select(
  [], 
  {label: "Which Variable would you like to inspect?", value: "variable"}
)

{const datasetOptions = 
  "Dataset 1": ["a", "b"],
  "Dataset 2": ["c", "d"],
  "Dataset 3": ["c", "f", "g"]
}

dataset.on("change", () => {
  variables.options = datasetOptions[dataset].options;
  variables.value = variables.options[0];
});

这是用ojs(@observablehq)在RStudio的夸托文档中编写的。
我会很感激任何提示,我应该寻找一个解决方案!我真的很感激!

8cdiaqws

8cdiaqws1#

要在Observable中工作,必须像这样声明datasetOptions对象:

datasetOptions = ({
  "Dataset 1": ["a", "b"],
  "Dataset 2": ["c", "d"],
  "Dataset 3": ["c", "f", "g"]
})

你可以在这里阅读更多关于Observable JavaScript的语法与vanilla JavaScript的不同之处:https://observablehq.com/@observablehq/observable-javascript
此外,Observable网站的一些功能在OJS语言中不可用。有关夸托中OJS的帮助,此论坛可能会有所帮助:https://github.com/quarto-dev/quarto-cli/discussions/categories/q-a

z5btuh9x

z5btuh9x2#

我认为下面的代码块应该可以让你接近你想要的。请注意,Observable具有内置的React性,这是使其超级易于使用的原因之一。如果你有

viewof x = Inputs...

然后,在后续的JavaScript代码中,变量x将引用x的值。特别是,您通常不需要像

my_input.on("change", () => {...})

因为更改由Observable运行时处理。

---
title: "Selecting Selects"
author: "MM"
format:
  html:
    echo: false
---

**Which dataset would you like to use?**
```{ojs}
viewof dataset = Inputs.select(
  ["Dataset 1", "Dataset 2", "Dataset 3"],
  {
    // Labels should generally be short and concise.
    label: "Dataset:", 
    value: "Dataset 1"
  }
)

Which variable would you like to use?

viewof variables = Inputs.select(
  // the `dataset` variable refers to the
  // value of the previous inputs.
  datasetOptions[dataset],
  {
    value: "variable",
    label: "Variable:"
  }
)

Here are your results:

  • Dataset: ${dataset}
  • Variables to choose from: ${datasetOptions[dataset]}
  • Selected variable: ${variables}
datasetOptions = ({
  "Dataset 1": ["a", "b"],
  "Dataset 2": ["c", "d"],
  "Dataset 3": ["c", "f", "g"]
})

相关问题