knockout不显示绑定到img元素的图像 [英] knockout not displaying images bound to the img element

查看:102
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆