Los datos de los registros vienen como se muestra (plantilla): {"Id":750,"Name":"Juaquin","Nationality":"American"} Me gustaría pasar la información sobre Nacionalidad a una función llamada flagUrl(someData ) que obtiene la Nacionalidad y devuelve una ruta de una URL de una Bandera de País.
self.flagUrl = ko.computed(function(data){ var obj = data; var c = countries.filter((country) => country.Nationality === obj)[0].alpha_2_code; //console.log(c); var alpha2code = c; myPath = "https://countryflagsapi.com/png/" + alpha2code; return myPath; }, self);y me gustaría insertarlo en todo el HTML de esta manera:
<tbody data-bind="foreach: records"> <tr> <td class="align-middle" data-bind="text:DriverId"></td> <td class="align-middle" data-bind="text:Name"></td> <td class="align-middle" data-bind="text:Nationality"></td> <td><img src="" alt="" height=25px width=40px data-bind="attr:{src: $root.flagUrl($Nationality)}"></img></td> <td class="text-end"> <a class="btn btn-default btn-light btn-sm" data-bind="attr: { href:'./driverDetails.html?id=' + DriverId }"><i class="fa fa-address-card-o" title="Selecione para ver detalhes"></i></a> </td> </tr> </tbody>Estoy usando knockout.js para vincular. La función en flagUrl es correcta y hace lo que se le dice, simplemente no funciona cuando los datos provienen del HTML. estoy desesperado He estado luchando con esto durante los últimos días. Gracias de antemano
Esto no implementa las banderas exactamente de la forma en que estaba pensando (con una llamada de función), pero esta podría ser una alternativa aceptable.
Aquí hay un ejemplo de trabajo: https://jsfiddle.net/galeroy/k9ro26nj/10/
<!DOCTYPE html> <head> <title>KnockoutJS Flags</title> <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type = "text/javascript"></script> </head> <body> <table data-bind="foreach: records"> <tbody> <tr> <td class="align-middle" data-bind="text: DriverId"></td> <td class="align-middle" data-bind="text: Name"></td> <td class="align-middle" data-bind="text: Nationality"></td> <td> <img data-bind="attr: { src: 'https://countryflagsapi.com/png/' + Nationality}" height="25" width="40" /> </td> <td class="text-end"> <button class="btn btn-default btn-light btn-sm" data-bind="attr: { href:'./driverDetails.html?id=' + DriverId }"> <i class="fa fa-address-card-o" title="Selecione para ver detalhes">Selecione para ver detalhes</i> </button> </td> </tr> </tbody> </table> <script src="knockout-demo.js"></script> </body> </html>