Initialize Bootstrap Colorpicker mit MongoDB Daten

Question

Ich habe eine Meteor-Anwendung und ich habe das Plugin colorpicker als Komponente hinzugefügt. Aber ich möchte es mit einem Wert in einer MongoDB-Sammlung zu initialisieren. Also initialisiere ich den Eingabetext (etwas wie #32a214), aber ich weiß nicht, wie man die Farbe in dem kleinen Quadrat in der rechten initialisiert.

In meiner html-Datei Ich habe:

<div class="form-group"><label class="col-sm-2 control-label">Color text image<br/></label> 
    <div class="col-sm-10"> 
     <div id="colorText" class="input-group colorpicker-component"> 
      <input type="text" value={{textImageColor}} id="textImageColor" placeholder="Choose a color" class="form-control" /> 
      <span class="input-group-addon"><i></i></span> 
     </div> 
    </div> 
</div> 

In meiner JavaScript-Datei, die ich habe:

Template.yourTile.rendered = function(){ 

    $('#colorText').colorpicker({ 
     color: "#32a214" 
    }); 
} 

Deshalb mag ich "# 32a214" mit einem Wert aus der Datenbank ersetzen. Ich möchte so etwas tun:

color: {{textImageColor}} 

Aber es funktioniert nicht. Also, weißt du, wie ich es machen kann?

EDIT:

Ich habe einen JavaScript-Code auf der Serverseite:

Meteor.publish('tiles', function(){ 
    return tiles.find(); 
}); 

Und ich bekomme die Daten mit einem Helfer:

Template.yourTile.helpers({ 
    'textImageColor': function(){ 
     var userID = Meteor.userId(); 
     var doc = tiles.findOne({createBy: userID }); 
     var textImageColor = doc && doc.textImageColor; 
     if(textImageColor == ""){ 
      return ""; 
     }else{ 
      return textImageColor; 
     } 
    } 
} 

Also, wenn ich {{textImageColor}} nennen in einer html-Datei funktioniert es, aber nicht in der Javascript-Datei. Ich denke, es ist vielleicht wegen der Belastung. Die Farbe wird im gerenderten Objekt initialisiert. Wenn ich also die Farbe durch {{textImageColor}} ersetze, funktioniert das nicht, weil der Wert noch nicht aus der mongoDB-Sammlung geladen wurde. Vielleicht muss ich warten, um den Wert zu haben, aber ich weiß nicht, wie ich es machen soll.

Answer 1

eine erfolgreiche pub/sub zu tun, müssen Sie alle folgende:

1. Sammlung mit Daten in db
2. eine Sammlung Definition gemeinsam an den Client und Server-Code
3. ein Verlag auf dem Server
4. ein Teilnehmer auf dem Client
5. ein Fund() auf dem Client

sieht aus, als ob du # 2 vermisst.

In einem allgemeinen Code (z. B. /collections/tiles.js) müssen Sie die Sammlung definieren. z.B.

tiles = new Mongo.Collection('tiles'); 

Wenn auf dem Server ausgeführt wird, wird sichergestellt, dass die Auflistung in der DB vorhanden ist. Auf dem Client wird eine Mini-Mongo-Instanz für diese Sammlung erstellt, mit der die clientseitige Suche() ausgeführt wird. Es wird auch eine Referenz "Kacheln" zu diesen Sammlungen erstellt.