knockout不显示绑定到img元素的图像 [英] knockout not displaying images bound to the img element
本文介绍了knockout不显示绑定到img元素的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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>
我的模型层（.cs文件）
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; }
}
}
我期待的结果是：浏览器渲染三个td元素的三个图像
实际结果是：只渲染了一个图像，不再显示第二个和第三个图像。
即使我尝试使用$ data.ImagesArray（）[0] .image2（）作为文本，在td元素之后给出一个span元素。即使这没有显示。
我在IE中检查了控制台并且它给出了错误
SCRIPT5007 ：无法获取属性'image2'的值：object为null或undefined
ImageDisplay.aspx，第2行字符57
据我所知，因为image2是可观察它应该被称为函数。我甚至试过把它称为属性。
有人能帮我理解这段代码的问题吗？
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?
推荐答案
.ajax（{
type： POST，
url： ImageDisplay.aspx / getallImages，
data：{} ，
contentType： application / json; charset = utf-8，
dataType： json，
成功：fnsuccesscallback，
错误：fnerrorcallback
}）;
function fnsuccesscallback（data）{
.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）;
}
}
}
.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（函数（）{
调试器;
var v = new ImagesListModel（）;
ko.applyBindings（v）;
}）;
(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/'+
这篇关于knockout不显示绑定到img元素的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
