0

我在一个页面上有多个 div，这些 div 标有特定的类。就像是 ：

<div class="modal-body auctionRequested" >  

    <table data-bind="foreach: auctionBatches">
        <tr>
            <td data-bind="text: $data.Id"></td>
            <td data-bind="text: $data.Name"></td>
        </tr>
    </table>  
<div class="modal-footer">  
<a href="#" class="btn btn-success">Call to action</a>  
<a href="#" class="btn" data-dismiss="modal">Close</a>  
</div>  
</div>  
</div>

视图模型定义如下：

function AuctionBatch(id, name, logoUrl, startDate, endDate, isBlind, isBuyNow) {
        this.id = ko.observable(id);
        this.name = ko.observable(name);
        this.logoUrl = ko.observable(logoUrl);
        this.startDate = ko.observable(startDate);
        this.endDate = ko.observable(endDate);
    }

    function AuctionBatchList() {
        this.auctionBatches = ko.observableArray([]);

    }

它以下列方式应用：

  $(document).ready(function() {
        var auctions = [];
        $.ajax({
                url: '@Url.Action("GetAuctionBatches", "CarStates")',
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                    if (data.success) {
                        auctions= data.list;  

                        modals = $('.auctionRequested');
                        $.each(modals, function(i, item) {
                        var vm = ko.dataFor(item);
                        vm.auctionBatches(auctions);

                        });

                     } 
                    else {
                        $("#error").css("display", "block");
                        $("#errorText").text(data.message);
                    }
                },
                error: function () {
                    alert("error");
                }
            });

        var modals = $('.auctionRequested');
                   $.each(modals, function(i, item) {
                        ko.applyBindings(new AuctionBatchList(), item);   
                   });
});

但是，尽管我可以在 firebug 中看到从服务器检索到多个元素，但 ui 上没有任何绑定，我也看不到任何错误。我错过了什么？

4

2 回答 2

3

您使用了错误的名称：

尝试这个：

<td data-bind="text:id">
<td data-bind="text:name">

（前面不需要 $data 并且使用了大写字母）

于 2013-08-26T09:16:13.983 回答
0

我怀疑问题出在您未显示的代码或返回的数据上。也许我可以通过提供您发布的代码的工作示例来最好地帮助您，请参阅这个 jsfiddle，我在其中做了两件事：

  • 移动了applyBindingsAjax 调用上方的位。由于您的success功能的工作方式，您需要绝对确定事情是及时的。

  • 像这样模拟 Ajax 调用：

    // Mock $.ajax calls:
$.ajax = function(options) {
    options.success({ 
        success: true,
        list :  [
            {Id: 1, Name: 'Test A'},
            {Id: 1, Name: 'Test B'}
        ]
    });
};

通过这些更改，您发布的代码似乎正在运行。

关于代码的一些注意事项：

  • 您有一个AuctionBatch构造函数，但它没有在任何地方使用。
  • 如果您new AuctionBatchList在正确的范围内保存对 的引用，则无需使用 jQuery 在success函数中再次找到它。通常使用 KO，如果您觉得需要$('some-selector')调用，也会有一个与特定视图不紧密耦合的解决方案。这是一个更新的 jsfiddle示例。
  • 您的 View 代码有一个 close </div>，没有匹配的 opening <div>。

希望这可以帮助！

于 2013-08-25T18:27:11.470 回答