2013-08-24 14 views
6

Sto lavorando a un nuovo progetto che utilizza il knockout js. Ho installato una piccola tabella che visualizza le immagini e le informazioni inserite in un modulo che popola una matrice osservabile. Ho le immagini avvolte con un tag di ancoraggio (link) e sto alimentando il in href attraverso il data-binding KO. Vedi sotto.I collegamenti dinamici Knockout.js non fanno clic attraverso

<a data-bind="attr: {href: imgUrl}" target="_blank"><img class="imgThumb" data-bind="attr: {src: imgUrl}"/></a>

Tutto questo viene visualizzato come previsto, tuttavia nessuno dei link sarà effettivamente clic per raggiungere la posizione dell'immagine.

Una voce gamma si presenta così:

col1: 'Bert', col2: 'Muppet', col3: 'Sesame Street', imgUrl: 'http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg'

Il rendering HTML è simile al seguente:

<a data-bind="attr: {href: imgUrl}}" target="_blank" href="http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg"><img class="imgThumb" data-bind="attr: {src: imgUrl}" src="http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg"></a>

Ancora una volta, nessuno dei miei link funziona, lo faranno non scegliere attraverso alla posizione dell'immagine come mi aspetto che facciano. Qualcuno può aiutarmi qui e sottolineare quello che mi manca. Inoltre, di nota, ho provato ad aggiungere uno click: function(){ return true; }, e anche questo non è stato d'aiuto. Grazie in anticipo e una demo può essere trovato qui: http://dev.voidbase.com/working.html

+0

Molto strano. Questo dovrebbe funzionare @ PWKad, i browser gestiscono automaticamente hrefs sugli ancoraggi. Non dovrebbe essere necessario alcun javascript una volta impostato href (che è il suo). Non riesco a vedere nulla che impedisca il clic. JSpell, potresti riprodurlo in un [violino] (http://jsfiddle.net)? – FakeRainBrigand

risposta

10

Siete sulla strada giusta con

Inoltre, di nota, ho provato ad aggiungere un click: function(){ return true; } pure, e che non aiutano .

Ma in sé la click: function(){ return true; } non è sufficiente perché l'evento sarà ancora click bolla quindi è necessario utilizzare l'opzione clickBubble: false (vedi anche nel documentation):

<a target="_blank" data-bind="attr: {href: imgUrl}, 
     click: function() { return true;}, clickBubble: false"> 
    <img class="imgThumb" data-bind="attr: {src: imgUrl}"/> 
</a> 

Demo JSFiddle.

Il modo in cui il bind di clic sull'elemento del corpo "ruba" l'evento click: <body style="padding-top: 100px;" data-bind="click: modalKiller">. Quindi, se restituisci true dal tuo gestore modalKiller, risolve anche il tuo problema.

+0

Questo sembra un sacco di lavoro per un collegamento. Ma ha funzionato per me - grazie! – Aaron

Problemi correlati