4

私はこのコードを持っています:

<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));

しかし、showMoreChats 関数が呼び出されると、次のエラーが発生します。

Unable to parse bindings. Message: TypeError: CommentList is not a function; Bindings value: visible: CommentList().length == 0

どういう意味ですか？

4

3 に答える 3

8

CommentList が未定義であるということではなく、それが観測可能ではない (したがって関数ではない) だけです。その理由は、ajax コールバックでは、サーバーから受信した「チャット」オブジェクトを「そのまま」プッシュしているだけだからです。たとえば、CommentList という新しい observableArray を作成するのではなく、そのままの配列 CommentList を配置するだけなので、KO によってエラーがスローされます。

ビューモデル コンストラクターで self.chats を構築するときと同じ変換を行う必要があります。

$.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("")
        }
    );
});

ちなみに、ko.mapping プラグインも参照してください。この変換を行うことができます。

編集: また、パフォーマンスを向上させるために、個々の項目を監視可能な配列にプッシュするのではなく、次のような 1 つの一括操作で追加する必要があります。

self.chats( self.chats().concat( ko.utils.arrayMap(chats, function(chat) {
    return { /* ... same as before ... */ };
} ) );
于 2012-07-03T01:53:55.147 に答える
3

Google 経由でこの質問を見つけ、参照用に私のケースを追加しました。それは本当に、本当にばかげています。しかし、これは私がよくする不注意による間違いです。

ko.utils配列関数 (arrayMap、arrayForEach、arrayFirst など)のいずれかを使用する場合、ソース配列を指定するのを忘れると、Knockout はこのエラーをスローします。あなたがするとき：

ko.utils.arrayMap(function(item) { ... })

それ以外の：

ko.utils.arrayMap(myArray, function(item) { ... });
于 2015-06-16T21:21:55.130 に答える
0

これは、バインディングが CommentList を検出できないことを意味します。つまり、CommentList は現在のコンテキストでは定義されていません。

于 2012-07-03T01:41:39.760 に答える