我正在尝试使用来自 html 中的 api 的数据传递参数

Question

记录中的数据如下所示（模板）： {"Id":750,"Name":"Juaquin","Nationality":"American"} 我想将有关国籍的信息传递给名为 flagUrl(someData) 的 function ) 获取国籍并返回国旗的 URL 的路径。

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

我想将它插入到整个 HTML 中，如下所示：

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

我正在使用 knockout.js 进行绑定。 flagUrl 中的 function 是正确的，并且按照它的指示执行，当数据来自 HTML 时它就不起作用。 我绝望了。 在过去的几天里，我一直在与这个决斗。 先感谢您

Answer 1

这并没有完全按照您的想法实现标志（使用 function 调用），但这可能是一个可以接受的替代方案？

这是一个工作示例： 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>

我正在尝试使用来自 html 中的 api 的数据传递参数

问题描述

1 个解决方案

解决方案1
0 2022-01-23 08:44:12

我正在尝试使用来自 html 中的 api 的数据传递参数

问题描述

1 个解决方案

解决方案1 0 2022-01-23 08:44:12

解决方案1
0 2022-01-23 08:44:12