0

ノード+マングース+反応+逆流アプリに足を浸しています。

また、最初の同形アプリを作成しようとしています。しかし、すべてをブラウザ化すると、次のエラーが表示されます

Running "browserify:client" (browserify) task
>> Error: Cannot find module './mongo' from 'project_folder/node_modules/mongoose/node_modules/mquery/lib/collection'

この問題は、require('mongoose') をどこかで実行した瞬間に発生します

これは、マングースがクライアント側で動作しないためだと思いますか? しかし、(Re)Flux ストアにデータを入力する方法がわかりません。

ここに私が定義しているストアのスニペットがあります (mongoose は既に別のファイルで mongo に接続されており、browserify を実行しないと出力が得られます)

var Reflux=require('reflux');
var mongoose=require('mongoose');

var _snippets=[];

var snippetSchema = new mongoose.Schema({
    title: String,
    data: String
});
var Snippet = mongoose.model('Snippet', snippetSchema);

var SnippetStore = Reflux.createStore({

    init: function() {
        Snippet.find(function(err, snippets) {
            _snippets = snippets;
        });
    },


    getSnippets:function() {
        return Snippet.find(function(err, snippets) {
            if (err) return console.error(err);
            return snippets;
        });
    }

});

module.exports=SnippetStore;

4

1 に答える 1

0

私の知る限り、mongo クライアント側を実行することはできません。クライアント側からサーバー側への ajax 処理を行う必要があります。

props をアプリに渡す

同形 JSのプロのヒントは、アプリ (つまり、最上位のコンポーネント) を初期の props で開始し、サーバー側への ajax 呼び出しを介して、クライアント側でフラックス/リフラックスなどを入力し続けることです。

アプリに初期 props をプッシュするには、いくつかの方法があります。たとえばスクリプトタグで、サーバーに小道具をレンダリングさせます（疑似コードが続きます）：

// Server-side: Put initial props on the template
<script id="reactprops">
    { JSON.stringify(initialProps) }
</script>

...同様に、次のようにテンプレートでアプリをレンダリングします。

// Server-side: Render component
React.renderComponentToString(AppComponent(initialProps))

クライアント側は小道具reactpropsを取得する必要があります。

// Client-side: Pick up props on #reactprops
var props = JSON.parse(document.getElementById('reactprops').innerHTML);

...そして、小道具を次のように実行します。

// Client-side: Render component
React.renderComponent(AppComponent({initialProps: props}));

小道具をRefluxストアに渡す

componentDidMountさらに、アプリはストアを開始する必要があります。これは、アプリ コンポーネントで簡単に実行できます。次のように、受け取った初期の小道具を逆流ストアに渡すことができます。

// You need to create an action that is called when the App has mounted
var Actions = createActions(['appDidStart' /* snip-snip */]);

var App = React.createClass({
    componentDidMount: function() {
        Actions.appDidStart(this.props.initialProps);
    },
    render: function() { /* snip-snip */ }
});

appDidStart一方、店舗では、次のようにアクションを聞く必要があります。

var SnippetsStore = Reflux.createStore({
    init: function() {
        this.listenTo(Actions.appDidStart, this.onLoad);
    },
    onLoad: function(initialProps) {
        /* do something with initialProps */
    },
    /* snip-snip */
});

これがあなたにとって理にかなっていることを願っています。

于 2014-10-27T14:12:08.810 に答える