0

特定のクラスでマークされたページに複数の 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を参照してください。ここで、私は2つのことを行いました:

  • 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 AuctionBatchListjQuery を使用して関数内で再度検索する必要がなくなりsuccessます。通常 KO では、呼び出しが必要だと思われる場合は$('some-selector')、特定のビューとの結合が緩いソリューションもあります。これは、その例を含む更新された jsfiddleです。
  • View コードに</div>一致する Opening のない Closingがあり<div>ます。

お役に立てれば！

于 2013-08-25T18:27:11.470 に答える