Question

我正在使用MVC和knockout.js处理Web应用程序的表。我有做网络开发的经验，但这是我第一次使用淘汰赛。我目前有一个3列的表。第二个和第三个使用显示数据的敲除功能填充。我尝试以相同的方式设置第一列，除了使用图像而不是文本。我不断在浏览器的控制台中看到一个破损的图像图标和错误。

浏览器给我的错误：获取http：// hostinfo /Sponsor/~PracticeAppImagesGWC.png 404（未找到）

这是我的表：

<table id="sponsorTable">
    <thead><tr>
        <th></th><th id="sponsor">Sponsor</th><th id="description">Description</th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach: Sponsors">
        <tr>
            <td><img data-bind="attr: {src: Image}" /></td>
            <td class="sTableInfo" data-bind="text: Name"></td>
            <td class="sTableInfo" data-bind="text: Description"></td>
        </tr>
    </tbody>
</table>

这是我填写表格的功能。（第2列和第3列填写正确）

function pageModel() {
    var self = this;
    self.Sponsors = ko.observableArray([]);
}

function Sponsor( _image, _name, _descrip)
{
    var self = this;

    self.Image = ko.observable(_image);
    self.Name = ko.observable(_name);
    self.Description = ko.observable(_descrip);
}

var viewModel = new pageModel();
viewModel.Sponsors().push(new Sponsor("~/Images/GWC.png", "name1", "info1"));
viewModel.Sponsors().push(new Sponsor("second image would go here", "name2", "info2"));

$(function () {

    ko.applyBindings(viewModel);
})

我认为某些东西正在逃避img源链接中的斜线，但我不确定，我无法弄清楚原因。

更新：我的编译器告诉我这个图片标签：“验证（HTML5）：元素'img'缺少必需的属性'src'。”

Answer 1

从viewmodel传递图像名称，静态文件夹路径可以像这样附加。

// in viewmodel
viewModel.Sponsors().push(new Sponsor("GWC.png", "name1", "info1"));
// inside table
<td><img data-bind="attr: {src:'/Image/'+ Image}" /></td>

希望这会有所帮助......

Answer 2

push必须位于observableArray本身，您需要删除括号：

var viewModel = new pageModel();
viewModel.Sponsors.push(new Sponsor("~/Images/GWC.png", "name1", "info1"));
viewModel.Sponsors.push(new Sponsor("second image would go here", "name2", "info2"));

使用data-bind knockout.js显示图像

2 个答案: