javascript - KnockoutJs 绑定(bind)可变数量的控件

Question

在 KnockoutJs 中，我有一个想要绑定(bind)到页面的控件列表，如下所示:

{
  ...
  "FirstName": "Fred",
  "LastName": "Jones",
  "Controls": [
    {
      "Name": "ImageSrc"
      "CurrentValue": "/FredJonesPicture.jpg",
      ...etc...
    },
    {
      "Name": "ImageCaption",
      "CurrentValue": "Quarterback Fred Jones",
      ...etc...
    },
    {
      "Name": "HomeTeamScore",
      "CurrentValue": "7",
      ...etc...
    }
   ]
   etc...
}

带有模板(*ImageSrc* 等是占位符)，例如:

<script type="text/html" id="template1">
    <div class="mainContent" data-bind="with: Model" >
        <h3 data-bind="text: *ImageCaption*"></h3>
        <img data-bind="attr:{ src: *ImageSrc* }" class="activeImage" />
        <div data-bind="text: *HomeTeamScore*"></div>
    </div>
</script>  

<script type="text/html" id="template2">
    <div class="mainContent" data-bind="with: Model" >
        <h3 data-bind="text: *Quote*"></h3>
        <img data-bind="attr:{ src: *ImageSrc* }" />
        <h3 data-bind="text: *Song*"></h3>
        <img data-bind="attr:{ src: *Icon* }" style="floatleft"  />
        <div data-bind="text: *Band*"></div>
    </div>
</script>  

等等...

问题是可能有多个可能的模板，每个模板的控件数量不定(可能有数百个)。每页只有一个模板。

绑定(bind)到页面的最简单、最有效的语法是什么？您将变量传递给的函数、自定义绑定(bind)，或者是否存在我缺少的某种内置绑定(bind)技术？

Answer 1

看起来你有一本结构奇怪的字典。如果我理解您的示例代码，您希望绑定(bind)与 Name 关联的 CurrentValue。如果你的控制结构是这样的

Controls: {
    ImageSrc: {
        CurrentValue: "/FredJonesPicture.jpg",
        ...
    },
    ...
}

那么你的绑定(bind)就会像

    <img data-bind="attr:{ src: Controls.ImgSrc.CurrentValue }" class="activeImage" />

如果数组结构不适合您，您可以编写一个计算来转换您的控件。