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

现在它正在调用 AddClass 方法，该方法在 Load 上工作正常，但在 ChangeUserChat 上总是出错。它总是说LikedClass is not defined。我认为它没有调用 AddClass 方法或以某种方式避免它。我该如何解决这个问题。我在 AddClass 和控制台显示结果后检查了添加 console.log。

编辑：

我的页面中有两个部分。像这样

在此处输入图像描述

现在。默认情况下，第一个项目被分配给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 开始渲染引用您LikedClass但无法找到它的 UI。

一种解决方案是在设置之前移动AddClass逻辑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 回答