2012-06-11 24 views
80

En knockout.js 2.1.0, en una plantilla que utiliza el enlace foreach, puede acceder al índice del elemento actual a través de la función $ index(). En un enlace foreach anidado, ¿hay alguna forma de acceder al índice de $ parent desde una plantilla?

Digamos que tiene una estructura de datos como esto:

var application = { 
    topModel: [ 
    { 
     {subModel: [{'foo':'foo'}, { 'bar':'bar'}]}, // this has top:0 and sub:0 
     {subModel: [{'foo2':'foo2'}, { 'bar2':'bar2'}]} // this has top:0 and sub:1 
    }, 
    { 
     {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:1 sub:0 
    }, 
    { 
     {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:2 sub:0 
     {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:2 sub:1 
    }, 
    ... 
    ]}; 

Con esto, quiero imprimir la ruta a cada modelo utilizando índices: [TOPMODEL índice submodelo-index], por lo que la salida será algo como:

[0 0] 
[0 1] 
[1 0] 
[2 0] 
[2 1] 
... 

he atado los modelos usando foreach, pero no puedo encontrar la manera de acceder índice del TOPMODEL en el contexto de la sub-modelo. El siguiente ejemplo muestra un enfoque que he intentado, pero no funciona, ya que no puedo entender cómo acceder al índice de $ parent referrer.

<!--ko foreach: topModel --> 
<!--ko foreach: subModel --> 
    [<span data-bind="text: $parent.index()"></span> 
    <span data-bind="text: $index()"></span>] 
<!--/ko--> 
<!--/ko--> 

debe imprimir: 0 1, 0 2, 1 0, 1 1, 1 2, 2, 0, 2 1, ...

+0

En realidad, no necesita ese '()' después del '$ index' allí. –

+0

Además, si pudieras crear un jsfiddle con lo que tienes, eso lo haría más fácil. O publique su fuente de datos y vea el código del modelo. –

+0

Por el momento, solo estoy trabajando en la creación de prototipos, así que no tengo mucho más que el ejemplo dado. Aunque estoy abierto a sugerencias usando otros enfoques. –

Respuesta

165

para acceder al índice del uso objeto padre

$parentContext.$index() 

en lugar de

$parent.index() 
+0

¡Genial! Eso fue perfecto :) –

+0

Gracias. ¡Pasé siglos intentando encontrar eso! – DavidHyogo

+13

Sin embargo, para ser demasiado explícito en el nombre de la falta de cerebro, todavía tiene que '$ parentContext. $ Index()' con los parens. ; ^) Un poco más sobre $ parentContext [aquí] (http://www.appliness.com/10-things-to-know-about-knockout-js-on-day-one/), fwiw. – ruffin

2

La forma más sencilla puede averiguar es descargar el "contexto knockout" para el cromo. Esto le muestra qué datos están vinculados a qué elemento y también le permite ver las funciones/variables disponibles para ese elemento en particular. Es una herramienta increíble para situaciones como estas.