我正在嘗試使用來自 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