Re: [KnockoutJS] KO Binding Issue

[Gunnar Liljas]

Add all messages in one operation. Avoid pushing to the observable array.

var messages=[];

ko.utils.arrayForEach(data, function (item) {

                    var msgobj = new ViewMessagesObject();

                    msgobj.Chattype(item.Chattype);

                    msgobj.contactname(item.contactname);

                    msgobj.contactnum(item.contactnum);

                    msgobj.contactpic(item.contactpic);

                    msgobj.deliverydate(item.deliverydate);

                    msgobj.file(item.file);

                    msgobj.frompic(item.frompic);

                    msgobj.is_delivered(item.is_delivered);

                    msgobj.is_read(item.is_read);

                    msgobj.loader(item.loader);

                    msgobj.message(item.message);

                    msgobj.messageid(item.messageid);

                    msgobj.messgetype(item.messgetype);

                    msgobj.Pic(item.Pic);

                    msgobj.readdate(item.readdate);

                    msgobj.sentdate(item.sentdate);

                    msgobj.sentstatus(item.sentstatus);

                    msgobj.toname(item.toname);

                    msgobj.topic(item.topic);

                    msgobj.uploadopacity(item.uploadopacity);

                    

                    messages.push(msgobj);

}

self.DisplayMessageCollection(messages);

2015-08-21 7:56 GMT+02:00 Mani kishore <manikis...@gmail.com>:

Hi All,

I am developing an chat application with KO. While binding the chat conversation, the browser is hanging till binding and the favicon, browser Refresh and cursor buttons are blinking for every message binding.

I've tried like making visible false by default and making visible after binding. But it didn't worked for me.

Here is the KO code for binding the messages

ko.utils.arrayForEach(data, function (item) {

                    var msgobj = new ViewMessagesObject();

                    msgobj.Chattype(item.Chattype);

                    msgobj.contactname(item.contactname);

                    msgobj.contactnum(item.contactnum);

                    msgobj.contactpic(item.contactpic);

                    msgobj.deliverydate(item.deliverydate);

                    msgobj.file(item.file);

                    msgobj.frompic(item.frompic);

                    msgobj.is_delivered(item.is_delivered);

                    msgobj.is_read(item.is_read);

                    msgobj.loader(item.loader);

                    msgobj.message(item.message);

                    msgobj.messageid(item.messageid);

                    msgobj.messgetype(item.messgetype);

                    msgobj.Pic(item.Pic);

                    msgobj.readdate(item.readdate);

                    msgobj.sentdate(item.sentdate);

                    msgobj.sentstatus(item.sentstatus);

                    msgobj.toname(item.toname);

                    msgobj.topic(item.topic);

                    msgobj.uploadopacity(item.uploadopacity);

                    

                    self.DisplayMessageCollection.push(msgobj);

}

How can i stop these flicker issue while binding.

I've attached a video that shows the flicker of favicon and refresh button.

Thanks in Advance..

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mani kishore]

Hi,

Thanks for the suggestion.

I've tried this, But is doesn't worked. Actually the flicker is happening when the item is binding to UI.

[Vlad Mihailescu]

Hi guys!

I'm also curious about this, I'm using Google Chrome and the favIcon flickers till all the entries are processed.

I've added the optimization Gunnar suggested and skimmed the code for other work directly with the observable array and updated to use the buffer instead, have a look:

self.getAllEntries = function () {

        self.status("loading...");

        ajaxHelper(nav_url, 'GET', { url: self.forumUrl() }).done(function (data) {

            if (self.entries != null)

                self.entries.removeAll();

            if (data == null) {

                self.error("Error: Forum 404'd!");

                self.status("");

                return;

            }

            var entries_buff = [];

            for (var i = 0; i < data.length; i++) {

                var item = data[i];

                item.Nr = i + 1;

                item.Message = message_mkUrlClickable(item.Message, item.Message, item, 0);

                item.RefereeList = ko.observableArray();

                entries_buff.push(item);

            }

            

            AddReferees(entries_buff);

            self.entries(entries_buff);

            AddRefereesPreview();

            self.status("");

        });

    } 

function AddReferees(entries_buff) {

        for (var n = entries_buff.length - 1; n > -1; n--) {

            var post = entries_buff[n];

            if (post.ReferenceList == null || post.ReferenceList.length == 0)

                continue;

            for (var n2 = 0; n2 < post.ReferenceList.length; n2++)

                AddReferenceToPost(post.ReferenceList[n2].Number, post.Number, entries_buff);

        }

    }

function AddReferenceToPost(referredTo_postNr, referee_postNr, entries_buff) {

        for (var n = 0; n < entries_buff.length; n++) {

            var post = entries_buff[n];

            if (post.Number == referredTo_postNr) {

                if (post.RefereeList().length == 0)

                    post.RefereeList.push(referee_postNr);

                else if (post.RefereeList.indexOf(referee_postNr) == -1)

                    post.RefereeList.push(referee_postNr);

                break;

            }

        }

    }

Extra notes: Those entries that represent forum replies can have inner <ul> lists for videos and referees, just thought I'd mention this.