2012-02-23 18 views
7

tengo etiqueta de anclaje como estePaso de parámetros a una función en knockoutjs ViewModel

<a href="#" class="btn btn-success order-btn" data-bind="attr:{'data-tiername':$data.tierName, 'data-identifier' : $parent.identifier}, click: $root.setPath.bind($data,$data.tierName, $parent.identifier)">Send values</a> 

En el modelo de vista

var appViewModel = { 
    setPath: function (data, tier, identifier) { 
     alert(data); 
     alert(tier); 
     alert(identifier); 
    }, 
........... 
........... 
} 

El resultado es algunas knockoutjs código del núcleo está representada en mensaje de alerta (posiblemente definiciones de funciones observable(), dependienteObservable() y [Objeto objeto] que está vacío cuando se lo alerta con JSON.stringify)

¿Por qué funciona esto?

data-bind="attr:{'data-tiername':$data.tierName, 'data-identifier' : $parent.identifier} 

pero no esto:

click: $root.setPath.bind($data,$data.tierName, $parent.identifier) 

nota que tierName es un observable(), identificador se calcula()

¿Dónde puedo encontrar más información sobre bind() ??

Respuesta

6

Desde tierName y identifier son observables, es necesario llamar a ellos para acceder a sus valores:

click: $root.setPath.bind($data, $data.tierName(), $parent.identifier()) 

Además, el primer argumento en bind() estará obligado a this en setPath, así que supongo que necesita algo como esto:

click: $root.setPath.bind(/*will be bound to this*/ $root, $data, 
         $data.tierName(), $parent.identifier()) 

Por último, si $data sí mismo es un observable (que no está claro si se trata de usted código), entonces usted necesita para llamarlo así:

click: $root.setPath.bind($root, $data(), $data().tierName(), $parent.identifier()) 

También recuerde bind se ha introducido en ECMAScript 5, por lo que puede no estar presente en todos los navegadores. Así que probablemente hacer algo como esto en su lugar:

click: function(){$root.setPath($data, $data.tierName(), $parent.identifier());} 

Here hay información adicional sobre se unen.

+0

quería hacer 'alert (tier); alerta (identificador); 'en mi función viewmodel, realmente no quería el contexto (esto). Así que mi función se convirtió en 'setPath (nivel, identificador)' Gracias por ayudarme – nthapa13

+0

KO agrega una implementación de 'bind' si no está disponible, por lo que si hace referencia a KO, puede usar' bind'. –

+0

Gracias RP Niemeyer, es bueno saberlo. –

6

El primer parámetro para bind es el objetivo (lo que quiere this) cuando se ejecuta su función. Entonces, si quiere que data sea el primer argumento, entonces necesita ser el segundo argumento.

Dentro de su función, si está tratando con observables o observables calculados, entonces necesita desplegarlos para ver su valor. Para ello, llámelo como función alert(data()); o llamando al alert(ko.utils.unwrapObservable(data)); (que generalmente se utiliza cuando no se conoce el tipo de diseño si lo que va a tratar es observable o no observable.

La razón de que attr y otras fijaciones de trabajo cuando se pasa un observable/calcula en observable es que todos ellos ko.utils.unwrapObservable llamada para usted por conveniencia (por lo que no tienen que añadir () al pasar observables a menos que usted está escribiendo una expresión !$data().

Aquí hay alguna referencia sobre el enlace: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

+0

Gracias @RPN por la respuesta, es realmente útil. – nthapa13

Cuestiones relacionadas