Question

我正在尝试一个示例来开始它。官方网站提供的基础工作正常。但我试过一个样本没有按预期工作的示例。有人可以建议我正确的方向来使下面的样本工作吗？

这是我的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元素呈现三个图像

实际结果是什么：只有一个图像正在渲染，第二个和第三个图像不再显示。

甚至我尝试使用$ data.ImagesArray（）[0] .image2（）作为文本，在td元素之后给出一个span元素。即便如此也没有显示出来。

我在IE中检查过控制台并且它出错了

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

据我所知，因为image2是一个可观察的，所以它应该被称为函数。我甚至试着把它称为财产。

有人可以帮我理解这段代码的问题吗？

Answer 1

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>

Answer 2

我已将表格标签更新为以下标签。

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

除此之外，删除了不必要的跨度，它解决了我的问题。

knockout不显示绑定到img元素的图像

2 个答案: