2012-01-25 16 views
7

Próbuję zbudować HTML z Knockout, że Jquery UI można przekształcić w toggle buttons. To, co muszę osiągnąć, to:Generowanie identyfikatorów w Knockout Foreach pętle

<div id="status"> 
    <input type="radio" id="status_ACTIVE" value="ACTIVE" name="status" /><label for="status_ACTIVE">Active</label> 
    <input type="radio" id="status_INACTIVE" value="INACTIVE" name="status" checked="checked" /><label for="status_INACTIVE">Inactive</label> 
</div> 

Korzystając z interfejsu użytkownika JQuery mogę z łatwością zamienić to na przyciski przełączania. Ale w jaki sposób mogę to wygenerować bez użycia teraz zamortyzowanych szablonów JQuery? To, co próbowałem zrobić:

Wewnątrz modelu javascript:

self.statuses = [{Selected:true,Text:"Active",Value:"ACTIVE"},{Selected:false,Text:"Inactive",Value:"INACTIVE"}]; 

Znaczniki:

<div id="status" data-bind="foreach: statuses"> 
    <input type="radio" name="status" data-bind="value: Value, id: 'status_' + Value" /><label data-bind="text: Text, for: 'status_' + Value"></label> 
</div> 

to nie działa. Nie sądzę, że podoba mi się to, jak próbuję utworzyć ten identyfikator lub powiązać go z for w pętli. Niepoprawnie rysuje przyciski, ponieważ dwa niezależne przyciski i funkcja klikania nie działają.

Nawet jeśli po prostu podam wartość jako id: id: Value i for: Value to nadal nie działa. Czy nie mogę ustawić tych atrybutów przy użyciu funkcji nokautu?

+0

Wygląda na to, że nie jest wiążąca dla atrybutów „id” lub „za”. Muszę napisać dla niego niestandardowe powiązanie. http://knockoutjs.com/documentation/custom-bindings.html – Arbiter

Odpowiedz

10

Dodanie tej JavaScript rozwiązać mój problem:

ko.bindingHandlers.id = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).attr('id', valueAccessor()); 
    } 
}; 

ko.bindingHandlers.forattr = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).attr('for', valueAccessor()); 
    } 
}; 

miałem zmienić for: 'status_' + Value do foratt: 'status_' + Value jak for jest słowem zastrzeżonym.

Aktualizacja: Mogłem również używane „attr” wiązanie, na przykład:

attr: { for: 'status_' + Value } 
+2

Można również użyć data-bind = "attr: {dla:" status_ "+ $ indeks}" i data-bind = "attr: {id:" status_ '+ $ index} "dla unikalnych identyfikatorów. Indeks $ odnoszący się do indeksu opartego na zera bieżącego elementu tablicy. Indeks $ jest obserwowalny i jest aktualizowany za każdym razem, gdy zmienia się indeks elementu (np. jeśli elementy są dodawane lub usuwane z tablicy). – viperguynaz

+0

AFAIK, zajmujący się problemem zarezerwowanych słów kluczowych, jest tak prosty jak zmiana: "na" dla ":" –

+3

Rozwiązanie, które dodałeś w swojej ** aktualizacji **, jest właściwym sposobem rozwiązania tego problemu. Dodanie dodatkowego handlarza nie wydaje się warte tego problemu. – Tyblitz