在Json中對圖像（鏈接）進行挖空映射

仍然試圖讓Knockout貼圖插件被微調。我很接近，但無法從Json（谷歌書籍API）獲取圖像鏈接來顯示圖像。不知道我是否應該嘗試深入到JSON上的HTML或重新構建映射的數據。我會很高興任何一種方式。在此先感謝您的幫助。在Json中對圖像（鏈接）進行挖空映射

HTML ...

<body> 
    <h2>Find Cat in the Hat</h2> 
     <div> 
      <input id="booksearch" /><input id="btnTest" type="button" value="button" /> 
     </div> 
     <div> 
      <table id="bookresults"> 
       <thead> 

        <tr> 
         <th colspan="6">Books</th> 

        </tr> 
       </thead> 
       <tbody data-bind="foreach: model.items"> 
        <tr> 
         <td><input type="button" title="Select" value="Select" /></td> 
         <td data-bind="text: volumeInfo.title"></td> 
         <td data-bind="text: volumeInfo.description"></td> 
         <td><table><tbody><!-- ko foreach: volumeInfo.industryIdentifiers --><tr><td data-bind="text: identifier"></td></tr><!-- /ko --></tbody></table></td> 
         <td><table><tbody><!-- ko foreach: volumeInfo.categories --><tr><td data-bind="text: $data"></td></tr><!-- /ko --></tbody></table></td> 
         <td><table><tbody><!-- ko foreach: items.volumeInfo --><tr><td><img data-bind="attr: {src: imageLinks.thumbnail}" /></td></tr><!-- /ko --></tbody></table></td> 

        </tr> 

        <tr> 
        </tr> 

       </tbody> 
      </table> 
     </div> 
    <script src="/Scripts/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script src="/Scripts/knockout-2.2.0.js"></script> 
    <script src="/Scripts/knockout.mapping-latest.js"></script> 
    <script src="/Scripts/ireadabook.js"></script> 

</body>

js文件....

$(document).ready(function() { 
    //Knockout Test 

    $('#btnTest').click(function() { 

     var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat"; 
     var viewModel = {}; 
     $.getJSON(url, function (data) { 

      viewModel.model = ko.mapping.fromJS(data); 
      ko.applyBindings(viewModel); 

     }); 

     //Show the results after selected 
     $('#bookresults').css("display", "block"); 

    }); 

});

來源

2013-09-26 Shoebob

對不起，我沒有看到問題是什麼......或者至少有什麼不工作？您是否試圖根據您獲得的鏈接顯示圖片？或者你想顯示一個來自src的圖像？請更詳細地解釋您的問題 –

映射插件創建具有相同的結構作爲源的視圖模型。因此，您需要像訪問源代碼那樣訪問映射視圖模型中的數據。

在源JSON的imageLinks屬性看起來是這樣的：

enter image description here

正如你所看到imageLinks不是一個數組而是一個對象（{}而不是[]），所以你不需要ko foreach你可以這樣寫：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <img data-bind="attr: {src: volumeInfo.imageLinks.thumbnail}" /> 
      </td> 
     </tr> 
    </tbody> 
</table>

演示JSFiddle。

來源

2013-09-26 05:22:34 nemesv

再次感謝nemsev。你是一個Knockout映射忍者。 – Shoebob

在Json中對圖像（鏈接）進行挖空映射

回答

相關問題