knockout not displaying images bound to the img element

http://forums.asp.net/p/1982784/5681655.aspx?Re+knockout+not+displaying+images+bound+to+the+img+element

The ImageDisplay.aspx and images are in the same folder.

i would suggest you try the demo below:

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

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="../Scripts/jquery-2.1.0.js"type="text/javascript"></script><scriptsrc="../Scripts/knockout-3.1.0.js"type="text/javascript"></script><%--<script src="../Scripts/ImagesDisplay.js" type="text/javascript"></script>--%>
   
     <scripttype="text/javascript">/// <reference path="../Scripts/jquery-2.1.0.min.js" />/// <reference path="../Scripts/knockout-3.1.0.js" />functionImagesModelForEachRow(image1, image2, image3){var self =this;
            self.image1 = ko.observable(image1);
            self.image2 = ko.observable(image2);
            self.image3 = ko.observable(image3);}varImagesListModel=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));//});                 
                    ko.utils.arrayForEach(data.d.ImagesList,function(val){
                        self.ImagesArray.push(newImagesModelForEachRow(val.Image1, val.Image2, val.Image3));});}function fnerrorcallback(result){
                    alert(result.statusText);}}}

        $(document).ready(function(){debugger;var v =newImagesListModel();          
            ko.applyBindings(v);});</script></head><body><formid="form1"runat="server"><div><divid="ImagesSCreen"><inputtype="button"data-bind="click: GetImagesList"value="Search"/><divdata-bind="foreach: ImagesArray"><divclass="item"><tableborder="2"><tbody><tr><td><imgwidth="800"height="533"data-bind="attr: { 'src': 'Images/' + image1() + '.png' }"/></td></tbody></table></div></div></div></div></form></body></html>

Code Snippet:

publicpartialclassJqueryDemo_ImageDisplay:System.Web.UI.Page{publicstaticstringImage1="image1";publicstaticstringImage2="image2";protectedvoidPage_Load(object sender,EventArgs e){}[WebMethod][ScriptMethod(ResponseFormat=ResponseFormat.Json)]publicstaticListOfImages getallImages(){Images images1 =newImages();
        images1.Image1="image1";
        images1.Image2="image1";
        images1.Image3="image1";ImagesImages2=newImages();Images2.Image1="image2";Images2.Image2="image2";Images2.Image3="image2";ListOfImages list =newListOfImages();
        list.ImagesList=newList<Images>();
        list.ImagesList.Add(images1);
        list.ImagesList.Add(Images2);return list;}}publicclassListOfImages{publicList<Images>ImagesList;}publicclassImages{publicstringImage1{set;get;}publicstringImage2{set;get;}publicstringImage3{set;get;}}

Hope it helps you.

posted @ 2014-04-23 15:43  happyu0223  阅读(184)  评论(0)  编辑  收藏  举报