Javascript KnockoutJS代码没有输出任何内容，但没有错误

我有这个击倒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 -->

API工作得非常好。当您通过浏览器访问API时，它会返回我希望它执行的操作。。按其ID返回相关自行车。。太好了

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

---

有人能解释一下吗，我真的看不见

像这样简单地修改视图以使其工作使用

和

并删除无容器

<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>

自行车细节
自行车名称
制造商

示例工作小提琴您可以使用嵌套的div（如果可以的话）

---

无容器帮助，因为您已使用无容器

将类应用于div check fiddle。详细信息是可观察的还是数组？从您的观点来看，我相信它可以在div（

）上使用

，然后在td上使用
data bind=“text:CycleName”
。删除应该像黄金一样工作的无容器的代码片段，为没有将代码片段放入而道歉。它是一个可观测数组self.bikes=ko.observableArray（）；如果您不想使用foreach simple，那么您没有使用任何
foreach
进行绑定，请尝试使用
data bind=“text:detail（）[0].CycleName
使用index@supercool似乎什么都没用，我不明白为什么。代码改编自asp.net EF6 BookService教程，在那里工作得很好。我遗漏了一些东西，但我不知道是什么……哦，伙计！！！！！！！！！我现在可以认真地拥抱你，亲吻你！！！！！我一直在绞尽脑汁从今天早上7点左右开始，直到昨晚11点左右。非常感谢！！
<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>