2013-08-24 10 views
6

Pracuję nad nowym projektem, który używa nokautu knockout. Skonfigurowałem małą tabelę, która wyświetla obrazy i informacje wprowadzane do formularza, który wypełnia tablicę obserwowalną. Mam obrazy opatrzone znacznikiem zakotwiczenia (link) i karmię je w href za pośrednictwem powiązania danych KO. Zobacz poniżej.Dynamiczne linki Knockout.js nie klikaj

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

Wszystko to wyświetlenie zgodnie z oczekiwaniami, jednak żaden z linków rzeczywiście kliknięciu na położenie obrazu.

Wpis tablicy wygląda następująco:

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

wytopione HTML wygląda następująco:

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

Ponownie, żaden z moich linków pracować, nie będą klikać do lokalizacji obrazu, tak jak tego oczekuję. Czy ktoś może mi tu pomóc i wskazać, czego mi brakuje? Co więcej, próbowałem dodać również click: function(){ return true; }, co też nie pomogło. Dzięki z góry i demo można znaleźć tutaj: http://dev.voidbase.com/working.html

+0

Bardzo dziwne. To powinno działać. @PWKad, przeglądarki automatycznie obsługują href na kotwicach. Po ustawieniu href (który jest jego) nie jest potrzebny JavaScript. Nie widzę niczego, co uniemożliwia kliknięcie. JSpell, czy mógłbyś to odtworzyć w [skrzypcach] (http://jsfiddle.net)? – FakeRainBrigand

Odpowiedz

10

Jesteś na właściwej drodze z

Również zauważyć, próbowałem dodanie click: function(){ return true; } jak również, i to nie pomogło .

Ale sama w sobie click: function(){ return true; } nie wystarczy, ponieważ zdarzeniem click będzie nadal bańka tak trzeba użyć opcji clickBubble: false (patrz również w 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.

Przy okazji wiązanie kliknięcia elementu body "kradnie" zdarzenie kliknięcia: <body style="padding-top: 100px;" data-bind="click: modalKiller">. Jeśli więc zwrócisz true z twojej obsługi modalKiller, to rozwiąże on twój problem.

+0

Wydaje się, że to dużo pracy dla linku. Ale zadziałało to dla mnie - dzięki! – Aaron

Powiązane problemy