KnockoutJS 代码没有输出任何东西，但没有错误

Question

我有这个 Knockout JavaScript 代码...

var bikesUri = '/api/bikes/';

function ajaxHelper(uri, method, data) {
    self.error(''); // Clear error message
    return $.ajax({
        type: method,
        url: uri,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        self.error(errorThrown);
    });
}
self.getBikeDetails = function (item) {
    ajaxHelper(bikesUri + item.Index, 'GET').done(function (data) {
        self.detail(data);
    });
}

还有这个HTML..

<!-- ko if:detail() -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">Bike Specifics</h2>
        </div>
        <table class="table table-striped">
            <tr><td>Bike Name</td><td data-bind="text: detail().CycleName"></td></tr>
            <tr><td>Manufacturer</td><td data-bind="text: detail().Manufacturer"></td></tr>
            <tr><td>Shop Category</td><td data-bind="text: detail().Category"></td></tr>
            <tr><td>Retail Price</td><td data-bind="text: detail().RRP"></td></tr>
            <tr><td>Our Price</td><td data-bind="text: detail().OurPrice"></td></tr>
            <tr><td>Stock Level</td><td data-bind="text: detail().Stock"></td></tr>
        </table>
    </div>
    <!-- /ko -->

和这个数据传输对象。

public class BikeDetailsDTO
{
    public int Index { get; set; } // ID
    public string CycleName { get; set; } 
    public string Category { get; set; } // Pulled from Category Maps
    public string Manufacturer { get; set; }
    public double OurPrice { get; set; } // pulled from suppliers
    public double RRP { get; set; } //pulled from suppliers
    public int Stock { get; set; } // pulled from suppliers

}

API 完美运行。当您通过浏览器访问 API 时，它 returns 正是我想要它做的。Return 通过 ID 找到相关的自行车。太棒了。

当我去访问界面打开的视图时，我什么也得不到。没有错误，当我单击“显示详细信息”按钮执行 "getBikeDetails" 时，它显示 table，但没有数据……什么都没有。 API 的所有其他部分都非常好，除了这段代码和它让我发疯之外！！！！！

任何人都可以对此有所了解，因为我真的看不到它..

Answer 1

像这样简单修改您的视图以使其工作使用 with 并删除无容器

<div class="panel panel-default" data-bind="with:detail">
    <div class="panel-heading">
         <h2 class="panel-title">Bike Specifics</h2>

    </div>
    <table class="table table-striped" data-bind="foreach:$data">
        <tr>
            <td>Bike Name</td>
            <td data-bind="text:CycleName"></td>
        </tr>
        <tr>
            <td>Manufacturer</td>
            <td data-bind="text:Manufacturer"></td>
        </tr>
    </table>
</div>

示例工作 fiddle here 你可以使用嵌套 div（如果没问题的话）

Containerless 有帮助，因为您已将 class 应用于 div 检查 fiddle 使用 containerless here

KnockoutJS 代码没有输出任何东西，但没有错误

KnockoutJS code not outputting anything, but no error

javascript

asp.net

knockout.js

asp.net-web-api2