javascript - knockout throws Message: TypeError: <xxx> is not a function. What does it mean? -


i have code:

<ul id="chats" data-bind="foreach: chats">    <li>       <div class="chat_response" data-bind="visible: commentlist().length == 0">         <form data-bind="submit: $root.addcomment">            <input class="comment_field" placeholder="comment…" data-bind="value: newcommenttext" />         </form>       </div>       <a class="read_more_messages" data-bind="visible: morechats, click: showmorechats">read more messages...</a>    </li> </ul>  function chatlistviewmodel(chats) {    // data    var self = this;     self.chats = ko.observablearray(ko.utils.arraymap(chats, function (chat) {        return { courseitemdescription: chat.courseitemdescription,            commentlist: ko.observablearray(chat.commentlist),            courseitemid: chat.courseitemid,            username: chat.username,            chatgroupnumber: chat.chatgroupnumber,            chatcount: chat.chatcount,            newcommenttext: ko.observable("")        };    }));     self.morechats = ko.observable(true);     self.showmorechats = function () {        var lastchatgroupnumber = self.chats()[self.chats().length - 1].chatgroupnumber;         $.ajax({            url: $.courselogic.dataitem.getmorechatsurl,            data: "{chatgroupnumber: " + ko.tojson(lastchatgroupnumber + 1) + "}",            type: "post",            contenttype: "application/json",            success: function (chats) {                var chatlist = self.chats();                $.each(chats, function (index, chat) {                    self.chats.push(chat);                });            }        });    }  }  ko.applybindings(new chatlistviewmodel(initialdata)); 

but error when showmorechats function called:

unable parse bindings. message: typeerror: commentlist not function; bindings value: visible: commentlist().length == 0

what mean?

it's not commentlist undefined, it's it's not observable (hence not function). reason being in ajax callback, pushing 'chat' objects received server "as is". you're not creating example new observablearray called commentlist, you're putting bare array commentlist - hence thrown error ko.

you need make same transformation did when constructing self.chats in viewmodel constructor, e.g.:

$.each(chats, function(index, chat) {     self.chats.push(         {             courseitemdescription: chat.courseitemdescription,             commentlist: ko.observablearray(chat.commentlist),             courseitemid: chat.courseitemid,             username: chat.username,             chatgroupnumber: chat.chatgroupnumber,             chatcount: chat.chatcount,             newcommenttext: ko.observable("")         }     ); }); 

by way, should take @ ko.mapping plugin, can transformation you.

edit: also, better performance shouldn't push each individual item observable array, add them in 1 bulk operation, like:

self.chats( self.chats().concat( ko.utils.arraymap(chats, function(chat) {     return { /* ... same before ... */ }; } ) ); 

Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -