使用knockoutjs进行数据表数据绑定

Question

我想使用datatable knockoutjs绑定将数据呈现到表中。我使用以下链接和代码将数据呈现到表中。 http://datatables.net/dev/knockout/

我在上面的示例中做的唯一更改是在渲染年龄数据时，我在age col中添加了输入框以供记录，而在表底部添加Updatebutton，以便用户可以更改其年龄并单击更新按钮数据应自动更新在下一页中，它应该反映在表格中。

我面临的问题是我无法更新本地js“people”模型，因此无法使用knockoutjs绑定更新的数据。

ko.observableArray.fn.subscribeArrayChanged = function(addCallback, deleteCallback) {
    var previousValue = undefined;
    this.subscribe(function(_previousValue) {
        previousValue = _previousValue.slice(0);
    }, undefined, 'beforeChange');
    this.subscribe(function(latestValue) {
        var editScript = ko.utils.compareArrays(previousValue, latestValue);
        for (var i = 0, j = editScript.length; i < j; i++) {
            switch (editScript[i].status) {
                case "retained":
                    break;
                case "deleted":
                    if (deleteCallback)
                        deleteCallback(editScript[i].value);
                    break;
                case "added":
                    if (addCallback)
                        addCallback(editScript[i].value);
                    break;
            }
        }
        previousValue = undefined;
    });
};`


 `var data = [
    { id: 0, first: "Allan", last: "Jardine", age: 86 },
    { id: 1, first: "Bob", last: "Smith", age: 54 },
    { id: 2, first: "Jimmy", last: "Jones", age: 32 }
]; `

   `var Person = function(data, dt) {
    this.id    = data.id;
    this.first = ko.observable(data.first);
    this.last  = ko.observable(data.last);
    this.age   = ko.observable(data.age);

    // Subscribe a listener to the observable properties for the table
    // and invalidate the DataTables row when they change so it will redraw
     var that = this;
    $.each( [ 'first', 'last', 'age' ], function (i, prop) {
        that[ prop ].subscribe( function (val) {
            // Find the row in the DataTable and invalidate it, which will
            // cause DataTables to re-read the data
            var rowIdx = dt.column( 0 ).data().indexOf( that.id );
            dt.row( rowIdx ).invalidate();
        } );
    } ); 
};

    $(document).ready(function() {

var people = ko.mapping.fromJS( [] );
    //loadData();

    var dt = $('#example').DataTable( {
        "bPaginate": false,
        "bInfo" : false,
        "bAutoWidth" : false,
        "sDom" : 't',
        "columns": [
            { "data": 'id' },
            { "data": 'first' },
            { "data": 'age',
                "mRender": function (data, type, row ) {    
                                var html = '<div style="display:inline-flex">' + 
                                                '<input type="text" class="headerStyle h5Style" id="ageId" value="'+data()+'"/>' +
                                                '</div>';

                                  return html;
                            } 
             }
        ]


    } );


    // Update the table when the `people` array has items added or removed
    people.subscribeArrayChanged(
        function ( addedItem ) {
            dt.row.add( addedItem ).draw();
        },
        function ( deletedItem ) {
            var rowIdx = dt.column( 0 ).data().indexOf( deletedItem.id );
            dt.row( rowIdx ).remove().draw();
        }
    );

    // Convert the data set into observable objects, and will also add the
    // initial data to the table
    ko.mapping.fromJS(
        data,
        {
            key: function(data) {
            var d = data;

                return ko.utils.unwrapObservable(d.id);        
            },
            create: function(options) {
                return new Person(options.data, dt);
            }    
        },
        people
    );



} );

Answer 1

另一答案

Answer 2

另一答案