javascript 如何使用Knockout读取JSON数据？

mgdq6dx1 于 2023-04-04 发布在 Java

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

我想创建一个打字机效果使用敲除，但我不能存储在我的表中的数据，以创建说的效果.我已经做了一些研究，几个星期，我没有基本的知识，通过这个问题跌跌撞撞我的方式.这是我第一次问堆栈溢出，所以裸与我.
这是基于这个codipen：https://codepen.io/drewdoesdev/pen/gVrOBm
尝试了这个打字机codipen：https://codepen.io/sauranerd/pen/mKKXjV?editors=1111
上面的这个例子对检索数据和
下面是我的变量的简短版本：

var story = {
    0: {
      text: "zzzzz", 
      image: "img/gargoylep.gif",
      choices: [
        {
             choiceText: "wake them?",//this is a button that goes to the next story
             storyLink: 1
             
        },
      ]
    },
    1: {
      image: "img/gargoylesk.gif",
      text: "im mad",
      choices: [
        {
             choiceText: "Continue",
             storyLink: 2
        }
      ]
    },
}

下面是显示文本的部分。它的工作方式是它启动游戏，转到0以按顺序显示文本，然后将场景（故事链接）切换到下一个。它与上面的“与爸爸共进晚餐”Codipen非常相似。

<span class="scene__text" data-bind="text: gameText"></span>

 <button class="scene__choice" data-bind="text: choiceText, click: changeScene">Click Here to Start</button>

我不想用css做这个效果，因为我想控制类型编写器的速度。如果我能以某种方式存储字符串，我可以使用代码。
让我知道，如果我需要显示更多的代码，或进一步解释。一个工作代码的例子将帮助我最。我想我只是完全错过了这些工作的语法。我感谢帮助！
我已经遵循了淘汰赛的文档，并阅读了w3关于json的内容。他们的示例一直得到“Object Object”作为结果。不确定我是否可以以某种方式检索显示的文本，然后将其发送到我编写的打字功能。
编辑：为了澄清，我想分配多个功能的打字速度（又名快，慢正常），以每个独特的文本。

JavaScript

来源：https://stackoverflow.com/questions/75914097/how-to-read-json-data-using-knockout

1条答案

按热度按时间

7y4bm7vi1#

您可以创建一个使用打字机效果注入文本的自定义绑定。
例如，下面的typeWriter绑定：

接受任何文本值，可观察或不可观察。
创建一个新的可观察文本，其中包含基于效果进度的子字符串。它以""开始，以原始字符串结束。
将默认的text绑定应用到此新值
设置动态持续时间的动画（字符串中每个字符10毫秒）
在每一帧上，经过的时间用于计算正确的中间状态
Knockout将中间状态同步到DOM

如果要使持续时间动态化，可以使用allBindings参数传递其他设置（请参见the first example in the documentation）

const texts = [
  "Something short.",
  "Medium length, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud",
  "A longer paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
];

ko.bindingHandlers.typeWriter = {
  init: (el, va) => {
    const partialText = ko.observable("");
    let animation;

    const effect = ko.computed(() => {
      const t0 = Date.now();
      const fullText = ko.unwrap(va());
      const duration = fullText.length * 10; // 10ms per char

      animation = requestAnimationFrame(next);

      function next() {
        const p = (Date.now() - t0) / duration;
        if (p >= 1) {
          partialText(fullText);
        }

        partialText(
          fullText.slice(0, Math.round(p * fullText.length))
        );

        animation = requestAnimationFrame(next);
      }
    });
    
    ko.applyBindingsToNode(el, { text: partialText });

    ko.utils.domNodeDisposal.addDisposeCallback(el, () => {
      cancelAnimationFrame(animation);
      effect.dispose();
    });
  }
}

const activeIdx = ko.observable(0);
const activeText = ko.pureComputed(() => texts[activeIdx()]);
const goNext = () => activeIdx((activeIdx() + 1) % texts.length);
ko.applyBindings({ activeText, goNext });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button data-bind="click: goNext">Next</button>

<h2>Typewriter text binding</h2>
<p data-bind="typeWriter: activeText"></p>

下面是一个使用模型对象的示例：（注意，只是为了好玩，我让ChatGPT为我们写了一个冒险：D）
一个二个一个一个

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何使用Knockout读取JSON数据？

1条答案

相关问题

热门标签

最新问答