Question

我有一个第一次正常工作的视图模型。这是我的模特。

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。

编辑：

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

enter image description here

现在。默认情况下，第一个项目被分配给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。

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

在淘汰赛中重新映射后，自定义属性不会被绑定

1 个答案: