1

初めて正常に動作するビューモデルがあります。これが私が持っているモデルです。

function MessageTViewModel() {
    var self = this

    self.SelectedUser           =   ko.observable()
    self.ProfileId          =   ko.observable()

    self.ExistingCommunication  =   ko.observableArray([])
    self.NewCommunication       =   ko.observableArray([])
    self.DeclinedCommunication  =   ko.observableArray([])
    self.Messages               =   ko.observableArray([])

    self.LoadData   =   function(){
        self.InitializeData()
    }

    self.InitializeData =   function(){
        var url =   'Messaging/Index'
        var type    =   'GET'
        ajax(url , null , self.OnInitializeDataComplete, type )             
    }
    self.OnInitializeDataComplete   =   function(data){
        var existingCommunication   =   getCommunication(conversation,'Existing')
        self.ExistingCommunication(existingCommunication)
        self.SetSelectedUser(existingCommunication[0])
    }
    self.SetSelectedUser = function(data){
        self.SelectedUser(data.ProfileId)
        self.InitializeUserData()
    }       

    self.InitializeUserData =   function(){
        var data    =   {ids : self.SelectedUser()}
        var url     =   'Search/GetProfile'
        var type    =   'GET'
        ajax(url , data , self.OnInitializeUserDataComplete, type )             
    }
    self.OnInitializeUserDataComplete   =   function(data){
        self.GetConversation()
    }

    self.GetConversation = function(){
        var data = {/// blah blah ///}
        var url =   'MessagingApi/Conversation'
        var type    =   'GET'
        ajax(url , data , self.OnGetConversationComplete, type )                
    }
    self.OnGetConversationComplete = function(data){
        var messages    =   ko.mapping.fromJS(data.Messages)
        self.Messages(messages())
        self.AddClass()
    }   
    self.AddClass = function(){
        ko.utils.arrayForEach(self.Messages(),function(item){
            item.LikedClass = ko.computed(function(){
                var status = item.TargetUserAction()
                return (status=='Liked') ? 'mlike_a' : 'mlike'
            }) 
            item.DislikedClass = ko.computed(function(){
                var status = item.TargetUserAction()
                return (status=='Disliked') ? 'mdlike_a' : 'mdlike'
            })                      
            item.FlagClass = ko.computed(function(){
                var status = item.TargetUserAction()
                return (status=='Flagged') ? 'flag_a' : 'flag'
            }) 
        })
    }               

    self.ChangeUserChat = function(data){
        self.SetSelectedUser(data)
    }

    self.LoadData()
}

$('document').ready(function () {
    ko.applyBindings(new MessageTViewModel())
})

これから余分なコードを削除しました。

そして、これが生成されたビューです。

<article class="prfl_box">
    <a data-bind="event:{click:$root.ChangeUserChat.bind($data)}">
        <img class="right_navm" alt="">
    </a>
    <h3 data-bind="text:WithUsername">talha.akber23</h3>
</article>
<article class="prfl_box">
    <a data-bind="event:{click:$root.ChangeUserChat.bind($data)}">
        <img class="right_navm" alt="">
    </a>
    <h3 data-bind="text:WithUsername">raheelshan123</h3>
</article>

アンカー クリックでわかるように、私は ChangeUserChat を呼び出しています。そのため、他のセクションに表示しているユーザー情報を変更します。呼び出しのシーケンスは次のとおりです。

オンロードデータ

self.SetSelectedUser(existingCommunication[0])
self.InitializeUserData()
self.GetConversation()
self.AddClass()

および ChangeUserChat への呼び出し時

self.ChangeUserChat = function(data){
    self.SetSelectedUser(data)
}
self.InitializeUserData()
self.GetConversation()
self.AddClass()

現在、Load では正常に動作する AddClass メソッドを呼び出していますが、ChangeUserChat では常にエラーが発生します。それは常に言いLikedClass is not definedます。AddClass メソッドを呼び出していないか、何らかの形で回避していると思います。この問題を解決するにはどうすればよいですか。AddClass の後に console.log を追加することを確認したところ、コンソールに結果が表示されました。

編集:

私のページには 2 つのセクションがあります。このような

ここに画像の説明を入力

今。デフォルトでは、最初のアイテムが割り当てられself.SetSelectedUser(existingCommunication[0])、ページの右側すべてに必要なすべての情報が入力され、各メッセージにさらに 3 つのプロパティが追加されます。を参照してくださいself.Messages()。次は私のバインディングです

<ul>
    <li id="chat-time-ago"></li>
    <li>
        <img src="../images/spacer.gif" data-bind="attr:{class:LikedClass()}">
    </li>
    <li>
        <img src="../images/spacer.gif" data-bind="attr:{class:DislikedClass()}">
    </li>
    <li>
        <img src="../images/spacer.gif" data-bind="attr:{class:FlagClass()}">
    </li>
</ul>

初めて問題なく動作しますが、項目 2 をクリックして呼び出すself.ChangeUserChatと、 と表示されますLikes Class is not defined。

4

1 に答える 1

1

問題は、Messages配列内の項目を割り当てた後に、計算されたプロパティを追加することです。そのため、KO はあなたを参照する UI のレンダリングを開始しますLikedClassが、それを見つけることができません。

AddClass解決策の 1 つは、設定する前にロジックを移動することです。Messages

self.OnGetConversationComplete = function(data){
   var messages = ko.mapping.fromJS(data.Messages)
   self.AddClass(messages())
   self.Messages(messages())
}

もちろん、これを機能させるには、AddClassメソッドを直接操作しないように変更する必要がありself.Messages()ます。

self.AddClass = function(messages){
        ko.utils.arrayForEach(messages, function(item){
            //... add your computeds
    })
}
于 2013-11-12T13:37:30.297 に答える