RefreshAll issue

How-to Discussions
1

hi , i’m facing a little error trying to refresh a message observable, so the 3 or 4 frist data comes blank and then the value become to come normally, data are coming from parse

        var messagesData = Observable()


        function Message(from, time, message) {
            this.from = from;
            this.time = time;
            this.message = message;
        }

          loadMessage()

        function loadMessage(){
          var roomsQuery = new Parse.Query("ChatRooms")
          roomsQuery.equalTo("objectId", rooms.value)
          var messagesQuery = new Parse.Query("Messages")
          roomsQuery.first({
            success: function(results){
              messagesQuery.equalTo("channel", results)
              messagesQuery.find().then(function(results){
                    messagesData.refreshAll(results,
                      function(oldItem, newItem){ return oldItem.id === newItem.id; },

                      function (newItem){
                      return messagesData.add(new Message(newItem.get("sender"), newItem.get("createdAt"), newItem.get("message")))
                      }
                    )
              })
            },
            error: function(results, error){
              console.log(error.message)
            }
          })
        }

file
5zClRYUbcTAn-legacy-files-XKjKVAeCEF3k3kCS-lZe5RX2y-Nu4uVxwZ0Kdmhdh.png373×613

i tried to find by my self how to fix this without results, i also have an another question , how can i separate in ui , message come from one user or another depending on their id?

2

anyone can help me with this?

3

Hi!

Can you paste the UX code that databinds to the observable?

4

this is the ux

    <Each Items="{messagesData}">
        <Rectangle Width="95%" Padding="3" CornerRadius="20" Color="White">
          <DockPanel>
            <StackPanel Margin="10,0,0,0" Padding="5">
              <Text TextWrapping="Wrap" TextColor="Gray" Value="{message}"/>
              <Panel Height="7"/>
              <Text Value="{from}" Margin="0,0,5,0" Alignment="Left" TextAlignment="Left" TextColor="Gray"/>
            </StackPanel>
            <Circle Height="35" Width="35" Color="Gray" Margin="0,6,6,0" Padding="1" Dock="Right" Alignment="TopRight">
                <ImageFill File="assets/28537.jpg" StretchMode="UniformToFill"/>
            </Circle>
          </DockPanel>
          <AddingAnimation>
                            <Scale Factor="0" Duration=".5" Easing="QuinticIn" />
                        </AddingAnimation>
        </Rectangle>
        <Panel Height="8"/>
    </Each>
5

hmm, wierd. Have you tried doing a toString() just to make sure the data is in strings:

new Message(newItem.get("sender").toString(), newItem.get("createdAt").toString(), newItem.get("message").toString())

maybe you should also console.log the data you put in Message just to see if there is proper data there

6

the message comes normally in the console , the probleme is when the view update i have 3 or 4 message blank before the view begin to show something. toString did anything. i have the same problem with almost all my function that call refreshAll

7

Hi guys , i’m still running into this , anyone can help me?

8

Hi!

I have to little of your code to reproduce this issue, are you able to share the whole project? Feel free to upload to this dropbox https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK if you dont wont to share the project publicly

9

i tried again … the messages doesnt appear in ux this is the js

var Parse = require('parse.js').Parse
Parse.initialize("Zx3WX3qeN3WeJNioNrgaAETSOmGeiv0DdvIqYr70", "SGs8ZHY1PCSI1kg4QRiGiJhROhcSGvSYs4Fk39g1");
Parse.serverURL = 'https://parseapi.back4app.com&#39;;
var Observable = require("FuseJS/Observable");

var Messages = Parse.Object.extend("IssueMessages");
var messagesText = Observable()
var messagesData = Observable()


function Messages(message, sender, time, id, parseObject){
  var self = this;
  this.message = message;
  this.sender = sender;
  this.time = time;
  this.id = id,
  this.parseObject = parseObject
}

var SenderPosition = Observable()

function loadMessages(){
var messagesQuery = new Parse.Query("IssueMessages")
messagesQuery.find().then(function(results){
  messagesData.refreshAll(results,
  function(oldItem, newItem){
    return oldItem.id == newItem.id
  },
  function(newItem){
  new Messages(newItem.get("message").toString(), newItem.get("createdAt").toString(), newItem.get("sender").toString(), newItem.id, newItem)
}
)
})
}

loadMessages()
function sendMessages(){
  if(messagesText.value == ""){
    console.log("what are you trying to do?")
  }else {
    var messages = new Messages();
    messages.set("message", messagesText.value);
      messages.set("sender", "guigui");
      messages.save().then(function(result){
          loadMessages();
      messagesText.value = "";
      })
  }
}

module.exports = {
messagesData: messagesData,
messagesText: messagesText,
loadMessages: loadMessages,
sendMessages: sendMessages
}

this is the ux

<App>
    <JavaScript File="javascript.js"/>
<ClientPanel>


<ScrollView>
    <StackPanel>
        <Each Items="{messagesData}">
            <Rectangle Height="50" Width="100%" ux:Name="haha" Color="White">
                <DockPanel>
                    <Circle Dock="Left" Margin="4,0,0,0" Height="30" Width="30" Color="Black"/>
                    <Text Value="{message}" Alignment="CenterLeft" Margin="5,0,0,0"/>
                </DockPanel>
            </Rectangle>
        </Each>
    </StackPanel>
</ScrollView>
<Grid Dock="Bottom" Height="50" Width="100%" Color="White">
    <DropShadow/>
    <DockPanel>
        <TextView Value="{messagesText}" Padding="2" Margin="0,10,0,0" PlaceholderText="tape your text here"/>
        <Text Value="Send" Dock="Right" Alignment="CenterRight" Padding="5">
            <Clicked Handler="{sendMessages}">
                <Scale Factor="0.9" Duration="0.6" Easing="QuadraticIn"/>
            </Clicked>
        </Text>
    </DockPanel>
</Grid>
</ClientPanel>
</App>

maybe i’m failing to understand how refreshall works, you guys can use this backend , its just for testing will delete it after

10

In refreshAll(...) you are missing the update function, and not returning the new Messages object in the new item function. Please have a look at the arguments for refreshAll(...)

11

thanks

regards