Wie die Reagieren, und Meteor zusammen passen

Ich weiß nicht, ob es mehr ein Reagieren oder Meteor Sorge, vielleicht auch beides, aber ich bin derzeit am Aufbau einer web-app mit diesen beiden frameworks, und ich bin vor ein Programmierer-Problem. Ich bin kein Javascript-Entwickler aber einen Java-Entwickler (ich verwende täglich GWT), also vielleicht habe ich einige Anfängerfehler.

Meine app wächst und ich mehr und mehr Reagieren-Komponenten, etwa zwanzig oder so. Nun, ich habe einen Blick, das ist in Ordnung, ich habe einige zusätzliche Funktionalitäten, um meine Komponenten, aber es dreht sich bis ich mehr und mehr Logik in das react-Komponenten, die ist, glaube ich, gegen MVC-Prinzipien.

Aber ich weiß nicht, wie sich zu bewegen, die Logik in "Meteor-controller-Komponenten". Jetzt, ich benutze Meteor für Ihr Modell, und das ist nur über alle. Ich sah viele Male diese Pete Hunt ' s talk und wie baute er seine Anwendung, sondern es hat nur eine "einfache" Komponente.

In der Tat, ohne zu Reagieren, dann der Ansicht wäre, der in html-Dateien definiert, mit Vorlagen. Der controller würde in js-Dateien und die Logik erscheint, dort zu sein. Ich kann deutlich sehen, die split zwischen die Ansicht und die controller.

Html-Datei (aus dem leaderboard Beispiel):

<template name="leaderboard">
  ...
</template>

<template name="player">
  <div class="player {{selected}}">
    ...
  </div>
</template>

Javascript-Datei (aus dem leaderboard Beispiel):

...     
Template.leaderboard.players = function () {
     return Players.find({}, {sort: {score: -1, name: 1}});
 };

 Template.leaderboard.selected_name = function () {
     var player = Players.findOne(Session.get("selected_player"));
     return player && player.name;
 };
...

Da Reagieren javascript, es ist wirklich einfach und verlockend an alle wir wollen im React-Komponenten.

Ich bin mir bewusst, diese Modelle sind relativ neu für alle, aber ich Frage mich, ob einige Konventionen existieren, wie etwa im Aufbau einer MVC-Anwendung, um eine flexible und wartbare web-Anwendung, alle Richtlinien zu Folgen? Ich bin nicht auf der Suche nach dem 'besten' Weg, es zu tun, aber für einige Meinungen.

Anmerkung: ich habe bewusst nicht viel code hier zu sein, nicht auf ihn zu konzentrieren, aber fühlen Sie sich frei, um zu veranschaulichen Sie Ihre Antwort mit dem, was du willst (code, schema, links).

---

Hier ist ein Beispiel, was ich Tue. In diesem Beispiel ist alles mögliche reagieren, Klassen, es ist vielleicht der beste Weg, es zu tun, vielleicht auch nicht, ich brauche deine Gedanken.

Zusammenfassend ist zu sagen, es erstellt eine Liste von Elementen (Boostrap-Liste-Fraktion) aus einem array gegeben, die als Eingabe (so etwas wie [{name: itemName1, Typ:itemType1}, {name: itemName2, Typ:itemType2} ...] das erzeugt eine Ansicht wie:

• itemName1
• itemName2
• ...

Jedes Element seinen eigenen Stil auf seine Art. Dann durch die Eingabe von text-box kann der Benutzer eine Suche durch diese Liste, es filtert die Liste und erzeugt eine neue, die zusammen mit der passenden Elemente (der Suchalgorithmus ist nicht Recht und wird geändert). Plus, es gibt weitere Befehle, die mit bestimmten Taste der Tastatur. Alles funktioniert einwandfrei, aber wie Sie sehen können, ist alles in Klassen reagieren, weiß ich nicht herausfinden, wie fit Meteor mit Reagieren.

Meteor Datei:

if (Meteor.isClient) {
  Meteor.startup(function() {
    //Build the view
    React.renderComponent(
      <Search items={initialItems}/>,
      document.getElementById('main')
      );
  });
}

Reagieren Datei:

Search = React.createClass({
    getInitialState : function() {
        return (
            { 
                items : flat(this.props.items),
                active : 0
             }
        );
    },
    setListVisibility: function(visibility) {
        this.refs.list.getDOMNode().style.visibility = visibility;
    },
    onchangeHandler: function() {
        var re = new RegExp(this.refs.search.getDOMNode().value, "i");
        var res = [];
        //filter on props.items and not state.items
        flat(this.props.items).map(function(item){
            if(item.name.search(re) >= 0)
                res.push(item);
        });
        this.setState({ items : res, active : 0});
    }, 
    onkeydownHandler: function(event){
        if(event.key == "ArrowDown" || event.key == "ArrowUp"){
            var shift = event.key == "ArrowDown" ? 1 : -1;
            var newActive = this.state.active + shift;
            if(newActive >= 0 && newActive < this.state.items.length)
                this.setState({ active : this.state.active + shift });
        } else if(event.key == "ArrowRight"){
            if(this.state.items.length > 0){
                var item = this.state.items[this.state.active];
                var newItems = retrieveItem(this.props.items, item.name, typeToSubType[item.type]);
                newItems = flat(newItems);
                if(newItems.length > 0)
                    this.setState({ items : newItems, active : 0 });
            }
        } else if(event.key == "ArrowLeft"){
            this.setState({ items : flat(this.props.items), active : 0});
        } else if(event.key == "Enter"){
            if(this.state.items.length > 0){
                var item = this.state.items[this.state.active];
                console.log("Add "+item.name+" "+item.type+" to the view");
            }
        }
    },  
    render: function () {
        return (
            <div>
                <nav className="navbar navbar-default" role="navigation">
                    <div className="container-fluid">
                        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <form className="navbar-form navbar-left" role="search">
                                <div className="form-group">
                                    <input ref="search" type="text" className="form-control" placeholder="Search" size="100" 
                                        onChange={this.onchangeHandler} 
                                        onKeyDown={this.onkeydownHandler}
                                        onFocus={this.setListVisibility.bind(this, "visible")}
                                        onBlur={this.setListVisibility.bind(this, "hidden")}/>
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
                <List ref="list" items={this.state.items} active={this.state.active}/>
            </div>
            );
    }
});

List = React.createClass({
    render: function () {
        var createItem = function(item, index) {
            var cl = "list-group-item";
            if(index == this.props.active)
                cl += " active";

            var gly = "glyphicon ";
            switch(item.type){
                case "dimension":
                    gly += "glyphicon-certificate";
                    break;
                case "hierarchy":
                    gly += "glyphicon-magnet";
                    break;
                case "level":
                    gly += "glyphicon-leaf";
                    break;          
                case "measure":
                    gly += "glyphicon-screenshot";
                    break;
            }

            return (<a href="#" className={cl} key={item.type+"/"+item.name}>
                    <span className={gly}></span>{"   "}{item.name}
                    </a>);
        };
        return (
            <div className="list-group search-list">
                {this.props.items.map(createItem, this)}
            </div>
            );
    }
});