淘汰賽不顯示圖像綁定到img元素

我想要一個樣本開始使用它。由官方網站提供的基礎工作正常。但是我嘗試了一個示例，該示例未按預期工作。有人可以建議我正確的方向，使下面的示例工作？淘汰賽不顯示圖像綁定到img元素

這裏是我的ViewModel

/// <reference path="../Scripts/jquery-2.1.0.min.js" /> 
/// <reference path="../Scripts/knockout-3.1.0.js" /> 

function ImagesModelForEachRow(image1, image2, image3) { 
var self = this; 
self.image1 = ko.observable(image1); 
self.image2 = ko.observable(image2); 
self.image3 = ko.observable(image3); 

} 

var ImagesListModel = function() { 
var self = this; 
self.ImagesArray = ko.observableArray([]); 
self.GetImagesList = function() { 
    $.ajax({ 

     type: "POST", 
     url: "ImageDisplay.aspx/getallImages", 
     data: {}, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: fnsuccesscallback, 
     error: fnerrorcallback 
    }); 

    function fnsuccesscallback(data) { 
     $.each(data.d.ImagesList, function (idx, val) { 
      debugger; 
      self.ImagesArray.push(new ImagesModelForEachRow(val.Image1, val.Image2, val.Image3)); 
     }); 


    } 
    function fnerrorcallback(result) { 
     alert(result.statusText); 
    } 
} 


} 

$(document).ready(function() { 

debugger; 

var v = new ImagesListModel(); 
ko.applyBindings(v); 

});

我的視圖層：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageDisplay.aspx.cs"  Inherits="Sample.ImageDisplay" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script> 
<script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script> 
<script src="Scripts/ImagesDisplay.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 

<div id="ImagesSCreen"> 
     <input type="button" data-bind="click: GetImagesList" value="Search" /> 
     <table border="2" > 
      <tbody> 
        <tr> 

        <td> 

         <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}" ></img> 
        </td> 
        <td> 

         <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}" /> 
        </td> 
        <td> 

         <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}"></img> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 


</div> 
</form> 
</body> 
</html>

我的模型層（這是我的cs文件）：

namespace Sample 
{ 
public partial class ImageDisplay : System.Web.UI.Page 
{ 
    public static string Image1 = "image1"; 
    public static string Image2 = "image2"; 

    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 

    [WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

    public static ListOfImages getallImages() 
    { 

     Images images1 = new Images(); 
     images1.Image1 = "image1"; 
     images1.Image2 = "image1"; 
     images1.Image3 = "image1"; 

     Images Images2 = new Images(); 
     Images2.Image1 = "image2"; 
     Images2.Image2 = "image2"; 
     Images2.Image3 = "image2"; 

     ListOfImages list = new ListOfImages(); 
     list.ImagesList = new List<Images>(); 
     list.ImagesList.Add(images1); 
     list.ImagesList.Add(Images2); 

     return list; 

    } 
} 
public class ListOfImages 
{ 
    public List<Images> ImagesList; 
} 
public class Images 
{ 
    public string Image1 { set; get; } 
    public string Image2 { set; get; } 
    public string Image3 { set; get; } 

} 
}

我是什麼期待的結果將是：瀏覽器呈現三個圖像的三td ele ments

究竟是結果：只有一個圖像被渲染，第二和第三個圖像不再顯示。

即使我嘗試給出一個帶有$ data.ImagesArray（）[0] .image2（）的span元素作爲td元素之後的文本。即使這沒有顯示。

我在IE檢查控制檯，它給誤差

SCRIPT5007: Unable to get value of the property 'image2': object is null or undefined 
ImageDisplay.aspx, line 2 character 57

至於我讀，因爲圖像2是可觀察到的，應當作爲函數調用。我甚至試圖把它簡單地稱爲財產。

有人能幫我理解這個代碼的問題嗎？

來源

2014-04-21 G_S

控制檯中是否有任何錯誤？ –

按照PW的建議檢查控制檯中的錯誤後，下一步是右鍵單擊生成的元素並選擇檢查元素以查看生成的HTML挖空。 –

你的代碼的哪一行是：ImageDisplay.aspx，第2行字符57？ –

我已經更新了我的表標記到下面的一個。

<table border="2" data-bind="ifnot: ImagesArray().length == 0">

除了這刪除了不必要的跨度，它解決了我的問題。

來源

2014-04-24 02:16:38

嗨G_S，你明白爲什麼這解決了你的問題？ –

是Chuck Schneider。當頁面首先嚐試呈現html時，ImagesArray將爲空。所以它沒有image1屬性。這導致對象爲空或未定義的異常。你覺得它不對嗎？請告知我是否錯誤 –

是的，這是絕對正確的。我通常通過使用with：或if：綁定來解決此問題。也就是說，我會定義self.ImagesArray = ko.observableArray（）; （注意，沒有[]），然後做一個與：ImagesArray或如果：ImagesArray。當你的ajax調用填充數組時，KO會填充DOM –

OH，剛剛注意到，您的img標籤語法不正確。沒有這樣的東西，如</img>。你需要刪除它。嘗試：

<td> 
    <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}" > 
    </td> 
    <td> 
     <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}"> 
    </td> 
    <td> 
    <img data-bind="attr: {src: 'Images/'+$data.ImagesArray()[0].image2()+'.png'}"> 
    </td>

來源

2014-04-21 19:22:47

如果這解決了您的問題，請接受答案或另行通知我們。謝謝。 –

感謝Chuck回覆。我嘗試過，但它力圖解決問題。請善意看看編輯的問題。 –

淘汰賽不顯示圖像綁定到img元素

回答

相關問題