Jak używać knockout.js do budowania elementów <select> s zarówno z tekstem, jak i wartościami, a także ustawić początkowo wybraną wartość?

Używam knockout.js do zbudowania elementów <select> s, a także do ustawienia wartości domyślnej. Wszystko działa zgodnie z oczekiwaniami do Dodaję optionsValue wiązanie, w którym to punkcie menu nie pokazuje już prawidłowej wartości początkowej przy ładowaniu strony.Jak używać knockout.js do budowania elementów <select> s zarówno z tekstem, jak i wartościami, a także ustawić początkowo wybraną wartość?

Innymi słowy, to działa:

<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name'"></select>

... ale to nie działa:

<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select>

Oto moje uproszczone, kompletny kod:

<!doctype html> 
<html> 
    <head> 
     <title>Demo</title> 
     <script src='knockout-2.1.0.debug.js'></script> 
    </head> 
    <body> 
     <select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select> 
     <script> 
      function QuickTransferViewmodel() 
      { 
       var self = this; 

       self.accounts = 
       [ 
        { id: 0, name: "Spending" }, 
        { id: 1, name: "Savings" } 
       ]; 

       self.selectedAccount = ko.observable(self.accounts[1]); 
      } 
      ko.applyBindings(new QuickTransferViewmodel()); 
     </script> 
    </body> 
</html>

I Spodziewam się, że menu wyświetli "Oszczędności" wybrane domyślnie. Dzieje się tak tylko wtedy, gdy usunę opcję optionsValue.

Z góry dzięki!

Źródło

2012-08-29 Bryan

Nie jest to bezpośrednio związane z Twoimi pytaniami, ale możesz uzyskać niezwykłe wyniki, jeśli powiązanie "wartości" ma miejsce przed opcjami. –

Wiązanie optionsValue służy do określenia, która właściwość jest używana do ustawienia atrybutu value na wygenerowanych elementach option.

Zmiana ta jedna linia sprawia, że praca próbki dla mnie:

self.selectedAccount = ko.observable(1);

Twój value wiązanie jest ustawiona na selectedAccount który jest ID i wartości w wygenerowanych options elementy są rzeczywiście identyfikatory.

Źródło

2012-08-29 21:25:29

Ah, dziękuję! To ma sens. W dokumentacji i samouczku knockout.js nie używają wiązania optionsValue. Przypuszczam, że w przypadku braku określonych wartości opcji knockout.js automatycznie śledzi wartość jako odwołania do elementów w tablicy ograniczonej opcjami. Ale jak już zauważyłeś, działa to inaczej, jeśli podasz wiązanie optionsValue. Dlatego mój kod zadziałał tylko wtedy, gdy opcja Wartość została pominięta. Dzięki jeszcze raz! – Bryan

Trzeba dokonać „wartość”, jeden z tych, na liście opcji .....

skończyło się na pisanie jakiś coffeescript do obsługi tego ....

replaceWithMatchingExt = (observableToFind, observablePropertyToSet, list, match) -> 
    return if not observablePropertyToSet 
    return if not observableToFind() 
    return if list.length == 0 
    observablePropertyToSet (x for x in list when x[match]() == observableToFind()[match]())[0] 

replaceWithMatching = (prop, list, match) -> 
    replaceWithMatchingExt(prop, prop, list, match)

który następnie pozwala mi (również coffeescript ...)

replaceWithMatching @Product, @Products(), 'Id'

zważywszy, że produkt jest wartością, Produkty lista wyboru .... i „ID” jest własnością chcę pasować. tj. Id jest tym, czego mogę użyć do opracowania równoważnych Produktów.

Kod następnie zastępuje obserwowalny Produkt obiektem znajdującym się na liście Produkty, jeśli jest zgodny z tym.

Źródło

2012-08-29 21:22:37

Jak używać knockout.js do budowania elementów <select> s zarówno z tekstem, jak i wartościami, a także ustawić początkowo wybraną wartość?

Odpowiedz

Powiązane problemy