Javascript Knockout.js在foreach绑定中使用循环变量

Javascript Knockout.js在foreach绑定中使用循环变量,javascript,knockout.js,Javascript,Knockout.js,我不熟悉Knockout.js,我认为这只是找到正确语法的问题 我想使用foreach绑定的循环变量来创建组件。大概是这样的: <ul data-bind="foreach: packages"> <li> <my-widget params='package'></my-widget> <!-- I have tried but dont' work: <my-wid

我不熟悉Knockout.js,我认为这只是找到正确语法的问题

我想使用
foreach
绑定的循环变量来创建组件。大概是这样的:

<ul data-bind="foreach: packages">
    <li>

      <my-widget params='package'></my-widget>

      <!-- I have tried but dont' work:
      <my-widget params='this'></my-widget>
      <my-widget params='$parent'></my-widget>
      <my-widget params='$parenteContext'></my-widget>
      -->

    </li>
</ul>
<my-widget params='data:$data'></my-widget>
有简单的方法吗?带有绑定的
是否有用

编辑: 下面是一个简单的JSFIDLE来演示它:

我希望看到一份ul列表,上面重复:

  • a
  • b b

我想您正在查找包含当前正在迭代的数据项的
$data

更多信息可在


编辑:所以你的
参数都弄混了。就像绑定一样,您需要传递它
property:value
——因此,如果要传递整个外部对象,您可以执行以下操作:

<my-widget params='data:$data'></my-widget>
唯一的区别是如何在小部件中访问它。另外,
$data
表示一个绑定上下文,要访问实际数据,您需要使用属性
data
,这会很快让人困惑。总而言之,如果您这样做,它将起作用:

<ul data-bind="foreach: packages">
    <li>

      <my-widget params='package'></my-widget>

      <!-- I have tried but dont' work:
      <my-widget params='this'></my-widget>
      <my-widget params='$parent'></my-widget>
      <my-widget params='$parenteContext'></my-widget>
      -->

    </li>
</ul>
<my-widget params='data:$data'></my-widget>

在我看来,一个更好的选择是将您实际需要的内容传递给您的小部件:

<my-widget params='name:name'></my-widget>

您可以使用组件绑定

<ul data-bind="foreach: {data: packages, as:package}">
    <li>

    <div data-bind='component: {
        name: "my-widget",
        params: { package: package }
    }'></div>

    </li>
</ul>

关于组件绑定的更多信息是。

好的,谢谢,很酷,我不知道,但是
打印未定义的,如果我将console.log记录在组件构造函数中,如果您在问题中包含一些标记/code/viewmodel,它将有助于回答问题。最好是一个最小的JSFIDLE/stacksnippet示例。这应该行得通。。让我知道对不起,我从一个现有的JSFIDLE开始,可能发生了一些奇怪的事情。请检查正确的JSFIDLE并告诉我它是否正确。没有“名字”,没有
<ul data-bind="foreach: {data: packages, as:package}">
    <li>

    <div data-bind='component: {
        name: "my-widget",
        params: { package: package }
    }'></div>

    </li>
</ul>