¿Cómo se usa knockout.js para construir un elemento <select> del elemento <option> s con texto y valores, y también establecer un valor inicialmente seleccionado?

Estoy usando knockout.js para construir un <select> elemento <option> s, y también para establecer su valor seleccionado por defecto. Todo funciona como se espera hasta Agrego el enlace optionsValue, en cuyo punto el menú desplegable ya no muestra el valor inicial correcto en la carga de la página.¿Cómo se usa knockout.js para construir un elemento <select> del elemento <option> s con texto y valores, y también establecer un valor inicialmente seleccionado?

En otras palabras, esto funciona:

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

... pero esto no funciona:

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

Aquí está mi simplificada, código completo:

<!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 esperaría que el menú desplegable muestre "Ahorros" como se seleccionó por defecto. Solo lo hace si elimino el enlace optionsValue.

¡Gracias de antemano!

Fuente

2012-08-29 Bryan

No está directamente relacionado con sus preguntas, pero puede obtener algunos resultados inusuales si el enlace 'value' es anterior a' options'. –

El enlace optionsValue se utiliza para determinar qué propiedad se utiliza para establecer el atributo value en los elementos option generados.

Este cambio de una línea hace que su trabajo de la muestra para mí:

self.selectedAccount = ko.observable(1);

Su value unión se establece en selectedAccount que es una identificación, y los valores de sus options elementos generados son de hecho las identificaciones.

Fuente

2012-08-29 21:25:29

¡Ah, gracias! Eso tiene sentido. En la documentación y el tutorial de knockout.js, no usan el enlace optionsValue. Supongo que, en ausencia de valores-opción especificados, knockout.js rastrea automáticamente el valor como referencias a elementos en la matriz de límite de opciones. Pero como ha señalado, esto funciona de manera diferente si especifica un enlace de optionsValue. Es por eso que mi código funcionó solo cuando optionsValue se dejó de lado. ¡Gracias de nuevo! – Bryan

Usted tiene que hacer el "valor" uno de los que está en la lista de opciones .....

terminé escribiendo algunos CoffeeScript de manejar esto ....

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)

que a su vez me permite (también CoffeeScript ...)

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

dado que el valor del producto es, los productos es la lista de opciones .... y 'Id' es la propiedad que quiero para que coincida con el. es decir, Id es lo que puedo usar para calcular productos equivalentes.

El código reemplaza el Producto observable con un objeto que está en la lista de Productos si coincide con uno.

Fuente

2012-08-29 21:22:37

¿Cómo se usa knockout.js para construir un elemento <select> del elemento <option> s con texto y valores, y también establecer un valor inicialmente seleccionado?

Respuesta

Cuestiones relacionadas