knockout.js 如何显示图像和文字使用敲除?

vkc1a9a2  于 2023-04-12  发布在  其他
关注(0)|答案(1)|浏览(229)

我正在学习更多关于knockout.js的知识。我想将图像添加到文本数据中,并根据数组中提供的图像链接显示与其匹配的数据的正确图像。我一次只想显示一组图像,换句话说,它会替换数据。我还不太了解数据绑定的工作原理,以及所有内容是如何显示的。我正在摸索着弄清楚它。
我已经弄明白了文本部分,但我迷失在添加图像的基础上设置如下。
下面是我的数据的一个简短示例:

const story = 

  //-------------------------------Initiate Chat
  {"1":{"text":"Pick a chat",
  "image":"http://placekitten.com/300/200",
  "choices":[{"choiceText":"Pick This","storyLink":"2"},{"choiceText":"no pick this","storyLink":"3"},{"choiceText":"nono this one","storyLink":"4"},{"choiceText":"dont pick this","storyLink":"5"},]},
  
   //-------------------------------Chat 1 test
  "2":{"text":"Kittens",
  "image":"https://placekitten.com/300/100",
  "choices":[{"choiceText":"Oops. Scared them.","storyLink":"3"}]},

  "3":{"text":"They are no longer scared",
  "image":"https://placekitten.com/300/100",
  "choices":[{"choiceText":"Poor things.","storyLink":"3"}]},
  
}

一个工作代码的例子将帮助我最.我一直得到“无法处理绑定”错误,当我试图弄清楚它.我似乎找不到具体的例子,图像被称为沿着其他数据,如文本如上所示.我感谢帮助!
例如:Knockout Image Not display while binding image and text at same time
这算是回答了我的问题,但我不知道如何用数组来做。我应该使用forEach吗?

gkl3eglg

gkl3eglg1#

使用带有attr敲除绑定的标记来显示图像。示例:

<img data-bind="attr: {src: 'https://placekitten.com/300/100'}">

请看这个工作示例:
https://jsfiddle.net/martlark/9v028d4z/34/

相关问题