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返回相关的自行车..很棒。

当我去访问界面所在的视图时，我什么都没得到。没有错误，当我点击显示详细信息按钮执行“getBikeDetails”它显示表，但没有数据..没有。除了这段代码之外，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>

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

当您使用无容器 here

将div类应用于div check小提琴时，

Containerless会有所帮助

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

1 个答案: