javascript - 在 knockout 中重新映射后，自定义属性未绑定(bind)

Question

我有一个第一次运行良好的 View 模型。这是我的模型。

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

我已经从中删除了额外的代码。

这是生成的 View 。

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

正如您在 anchor 单击上看到的那样，我正在调用 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() 。接下来是我的绑定(bind)

<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 .

Answer 1

您的问题是在分配 Messages 数组中的项目后添加计算属性。因此 KO 开始渲染引用您的 LikedClass 的 UI，但它无法找到它。

一种解决方案是在设置Messages之前移动AddClass逻辑

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