I am trying a sample to get started with it. Basics given by the official site are working fine. But I have tried a sample example which is not working as expected. Can someone suggest me the right direction to make the below sample work?
Here is my ViewModel
<pre lang="Javascript">/// <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);
});
My View
<%@ 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>
My Model layer (a .cs file)
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; }
}
}
What I am expecting the result would be: The browser renders three images for the three td elements
What actually is the result: Only one image is being rendered and the 2nd and 3rd images are no longer shown.
Even I tried giving a span element with $data.ImagesArray()[0].image2() as text for it after the td element. Even this was not shown.
I checked console in IE and it is giving error as
SCRIPT5007: Unable to get value of the property 'image2': object is null or undefined
ImageDisplay.aspx, line 2 character 57
As far as I read since image2 is an observable it should be called as a function. I tried even calling it simply as a property.
Can someone help me understanding the issue with this code?
Submit an article or tip