Question

我在页面上有多个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>

viewmodel定义如下：

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上没有绑定任何内容，我也看不到任何错误。我错过了什么？

Answer 1

你使用了错误的名字：

试试这个：

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

（您前面不需要$ data，而是使用大写字母）

Answer 2

我怀疑问题出在你没有展示的代码上，或者是正在返回的数据。也许我最好通过提供您发布的代码的工作示例来帮助您，请参阅this jsfiddle，其中我做了两件事：

将applyBindings位移到Ajax调用之上。由于你的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')调用，那么也会有一个与特定视图紧密耦合的解决方案。这是一个updated jsfiddle，其中有一个例子。
您的观看代码的结束</div>没有匹配的开头<div>。

希望这有帮助！

淘汰赛绑定似乎没有绑定:)

2 个答案: