2

KnockOutobservableArrayをjQueryDataTableにバインドしました。この配列にアイテムを動的に追加すると、新しいアイテムがテーブルに正しくレンダリングされますが、データテーブル自体の一部のオプションが更新されません。ポケットベルは更新されません。また、「利用可能なデータがありません」というメッセージは消えません。

HTML：

<table class="table table-striped" id="tblSample">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: List">
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>
<button class="btn" type="button" data-bind="click: AddSample">Test</button>

ノックアウトモデル：

var Sample = function(name) {
    this.Name = ko.observable(name);
};

var ViewModel = function() {
    var self = this;
    self.List = ko.observableArray();
    self.AddSample = function() {
        self.List.push(new Sample('New'));
    };
};

ko.applyBindings(new ViewModel());​

DOM対応：

$(document).ready(function() {

    $('#tblSample').dataTable({
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "bFilter": true,
        "bLengthChange": false,
        "bSort": true,
        "iDisplayLength": 15,
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per pagina"
        }
    });
});

動作中のJSFiddle：http: //jsfiddle.net/PhpDk/1

私は何か間違ったことをしていますか、それともこれはバグですか？

ありがとう、ニコ

（編集：jsfiddleのCDNリンクを修正）

4

2 に答える 2

2

KoGrid と呼ばれるネイティブ ノックアウト グリッドがあり ます https://github.com/ericmbarnard/KoGrid

しかし、本当に Datatables を使用したい場合は、すぐに使用できるノックアウト バインディングがあります (1.9.0 でのみ動作します)。

私は Github でそのバインディングをフォークし、多少拡張しました (ViewModel から Datables オブジェクトにアクセスして、更新、フィルター、並べ替えなどを行うことができます)。ここで見つけることができます。

https://github.com/AndersMalmgren/Knockout.Extensions

于 2012-11-29T10:01:13.940 に答える
1

これはそれを行う方法です...私はこれを示すjsfiddleを作成しました:

これを機能させるには、元のノックアウト foreach バインディング定義に 2 つのコールバック メソッドを追加する必要がありました。現在、これらのイベントを最新バージョンのノックアウトに取り込もうとしています。beforeRenderAll および afterRenderAll コールバックを追加して、データテーブルを破棄し、ノックアウト foreach バインディングが html を追加した後にデータテーブルを再初期化する必要がありました。これは魅力のように機能します。これを示す JSFiddle には、ノックアウトによって ViewModel にバインドされた完全に編集可能な jquery データテーブルがあります。

ko.bindingHandlers.DataTablesForEach = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var value = ko.unwrap(valueAccessor()),
        key = "DataTablesForEach_Initialized";

        var newValue = function () {
            return {
                data: value.data || value,
                beforeRenderAll: function(el, index, data){
                    if (ko.utils.domData.get(element, key)) {                                   
                        $(element).closest('table').DataTable().destroy();
                    }
                },
                afterRenderAll: function (el, index, data) {
                    $(element).closest('table').DataTable(value.options);
                }

            };
        };

        ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

        //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
        if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
            ko.utils.domData.set(element, key, true);
        }

        return { controlsDescendantBindings: true };
}

};

ブートストラップ付きjsfiddle

于 2015-09-22T17:51:45.327 に答える