2013-08-24 25 views
6

Knockout js kullanan yeni bir proje üzerinde çalışıyorum. Gözlenebilir bir diziyi dolduran bir formda girilen görüntüleri ve bilgileri görüntüleyen küçük bir tablo oluşturdum. Bir çapa (link) etiketi ile sarılmış görüntülere sahibim ve KO veri bağlaması aracılığıyla href'de besliyorum. Aşağıya bakınız. Knockout.js dinamik linkleri tıklatmıyor

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

beklendiği gibi bu ekranların tamamı

Ancak linklerin hiçbiri aslında görüntü konuma tıklanır.

Bir dizi giriş şöyle görünür:

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

Teslim edilen HTML şuna benzer: Bir kez daha

<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>

, Bağlantılarımdaki hiçbiri işe, bunlar tıklanmaz Gördüğüm gibi görüntü konumuna. Burada kimse bana yardım edebilir ve neyi kaçırdığımı gösterebilir. Ayrıca not olarak, click: function(){ return true; }'u da eklemeyi denedim ve bu da işe yaramadı. http://dev.voidbase.com/working.html

+0

Çok garip. Bu işe yaramalı. @ PWKad, tarayıcılar otomatik olarak çapalar üzerinde hrefs işlemektedir. Href ayarlandıktan sonra JavaScript gerekmez. Tıklamayı engelleyen hiçbir şey göremiyorum. JSpell, bunu bir [fiddle] (http://jsfiddle.net) içinde yeniden üretebilir misiniz? – FakeRainBrigand

cevap

10

Sen de

ile doğru yolda olduğunu, notun, ben de bir click: function(){ return true; } ekleyerek denedim ve bu da yardım etmedi: peşin ve demo sayesinde burada bulabilirsiniz .

<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: click olay hala kabarcık up yani clickBubble: false seçeneği (documentation de bakın) kullanmanız gerekecektir, çünkü

Ama kendi içinde click: function(){ return true; } yeterli değildir.

Vücut öğesi üzerindeki tıklama ciltlemeniz tıklama etkinliğinizi "çaldı": <body style="padding-top: 100px;" data-bind="click: modalKiller">. truemodalKiller işleyicinizden geri dönerseniz, sorununuzu da giderir.

+0

Bu bir bağlantı için çok iş gibi görünüyor. Ama benim için çalıştı - teşekkürler! – Aaron

İlgili konular