javascript - 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 时，它返回的正是我想要的结果。通过 ID 返回相关自行车。太棒了。

当我访问界面所在的 View 时，我什么也得不到。没有错误，当我单击“显示详细信息”按钮执行“getBikeDetails”时，它显示表格，但没有数据..什么也没有。除了这段代码以及它让我发疯之外，API 的所有其他部分都非常好!!!!!!

有人可以解释一下吗，因为我真的看不到......

Answer 1

像这样简单地修改你的 View ，使其工作使用with并删除co​​ntainerless

<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(如果可以的话)

无容器会有所帮助，因为您可以使用无容器在 div 检查 fiddle 上应用类 here