Reaktive Verwendung von "inProgress-Team/react-native-meteor" in Meteor 1.3

Question

Ich habe ein Projekt in reactive native (0.23) mit Meteor 1.3 als Back-End und möchte eine Liste von Kontaktelementen anzeigen. Wenn der Benutzer auf ein Kontaktelement klickt, möchte ich ein Häkchen vor dem Element anzeigen.

Für die Verbindung zu Meteor DDP verwende ich die geniale Bibliothek inProgress-team/react-native-meteor.

import Meteor, { connectMeteor, MeteorListView, MeteorComplexListView } from 'react-native-meteor'; 

class ContactsPicker extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     subscriptionIsReady: false 
    }; 
} 

componentWillMount() { 
    const handle = db.subscribe("contacts"); 
    this.setState({ 
     subscriptionIsReady: handle.ready() 
    }); 
} 

render() { 
    const {subscriptionIsReady} = this.state; 
    return (
     <View style={gs.standardView}> 
      {!subscriptionIsReady && <Text>Not ready</Text>} 
      <MeteorComplexListView 
       elements={()=>{return Meteor.collection('contacts').find()}} 
       renderRow={this.renderItem.bind(this)} 
      /> 
     </View> 
    ); 
} 

Das erste Problem ist, dass subscriptionIsReady kein Wieder machen auslöst, sobald sie true zurückgibt. Wie kann ich warten, bis das Abonnement fertig ist und die Vorlage dann aktualisieren?

Mein zweites Problem ist, dass ein Klick auf ein Listenelement den Status aktualisiert und sollte ein Häkchen anzeigen, aber die MeteorListView wird nur neu gerendert, wenn die DataSource geändert hat. Gibt es eine Möglichkeit, ein erneutes Rendern zu erzwingen, ohne die dataSource zu ändern/zu aktualisieren?

EDIT 1 (Lösung 1):

Danke @ user1078150 für eine funktionierende Lösung. Die komplette Lösung:

'use strict'; 
import Meteor, { connectMeteor, MeteorListView, MeteorComplexListView } from 'react-native-meteor'; 


class ContactsPicker extends React.Component { 

getMeteorData() { 

    const handle = Meteor.subscribe("contacts"); 
    return { 
     subscriptionIsReady: handle.ready() 
    }; 
} 

constructor(props) { 

    super(props); 

    this.state = { 
     subscriptionIsReady: false 
    }; 
} 

componentWillMount() { 
    // NO SUBSCRIPTION HERE 
} 

renderItem(contact) { 
    return (
     <View key={contact._id}> 
      <TouchableHighlight onPress={() => this.toggleSelection(contact._id)}> 
       <View> 
        {this.state.selectedContacts.indexOf(contact._id) > -1 && <Icon />} 
        <Text>{contact.displayName}</Text> 
       </View> 
      </TouchableHighlight> 
     </View> 
    ) 
} 

render() { 
    const {subscriptionIsReady} = this.data; 
    return (
     <View> 
      {!subscriptionIsReady && <Text>Not ready</Text>} 
      <MeteorComplexListView 
       elements={()=>{return Meteor.collection('contacts').find()}} 
       renderRow={this.renderItem.bind(this)} 
      /> 
     </View> 
    ); 
} 
} 

connectMeteor(ContactsPicker); 
export default ContactsPicker; 

Answer 1

Sie haben so etwas zu tun:

getMeteorData() { 
    const handle = Meteor.subscribe("contacts"); 
    return { 
     ready: handle.ready() 
    }; 
} 
render() { 
    const { ready } = this.data; 


}