Clean and Rebind Data using KnockoutJs Template

Vote count:

0

So I bind my Knockout template as follows:

First ajax, get data then I pass the data can call a function named bindKo:

function bindKo(data) {
            var length = data.length;
            var insertRecord = {};

            if (length > 0) {
                insertRecord = data[data.length - 1]; //last record is an empty PremlimViewModel for insert
                insertRecord.Add = true;
                data.splice(data.length - 1, 1); //remove that blank insert record
            }

            function prelims(data) {
                var self = this;
                var model = ko.mapping.fromJS(data, { copy: ["_destroy"] }, self);


                self.BidPriceFormatted = ko.computed({
                    read: function () {
                        var bidPrice = this.BidPrice();
                        if (bidPrice) {
                            if (!isNaN(bidPrice)) {
                                var input = '<input type="text" value="' + bidPrice + '"/>';
                                return $(input).currency({ decimals: 0 }).val();
                            }
                        }
                    },
                    write: function (value) {
                        value = value.replace(/\D/g, '');
                        this.BidPrice(value);
                    },
                    owner: this
                });

                return model;
            }

            var mapping = {
                create: function (options) {
                    return new prelims(options.data);
                }
            };

            function viewModel(prelimData) {
                var self = this;


                self.prelims = ko.mapping.fromJS(prelimData, mapping);
                self.remove = function (prelim) {
                    self.prelims.destroy(prelim);
                };
                self.addOption = function () {
                    var clone = jQuery.extend(true, {}, insertRecord);

                    self.prelims.push(ko.mapping.fromJS(clone));
                };
            }

            ViewModel = new viewModel(data);
            ko.applyBindings(ViewModel);
        }

I have a template defined where you can add and remove records:

<script type="text/html" id="PrelimsTemplate">
<!--Template Goodness-->
</script>

Then, ajax call, User updates added and deleted records and I do:

ko.mapping.fromJS(newestData, ViewModel)

But this does not work because my ViewModel is complex. So I would just like to reBind the template entirely. Make is disappear and reappear with latest data.

asked 46 secs ago

Brian Ogden

1,650