如何在流星中显示来自postgres的数据

时间:2015-06-28 13:25:55

标签: javascript meteor

我正在使用meteor-postgres并希望显示SQL查询的结果。

HTML:

...

<template name="myForm">
    <form class="search" method="GET">
        <input required="Required" type="text" name="width" placeholder="cm"/>
        <input type="submit"/>
    </form>
    Results:
    <ul>
        <!--How do I render results here-->
    </ul>
...

JS

Services = new SQL.Collection('services');
// in client
Template.myForm.events({
    "submit form": function (event) {
        var width = event.target.width.value;
        // TypeError: table is undefined, 
        // Maybe because I am on client side?
        console.log(services.first().fetch());
        // How can I get data here and render it to html?
    }
});

我不知道我还应该说什么,但StackOverflows希望我添加更多文字!

1 个答案:

答案 0 :(得分:0)

我决定使用https://github.com/numtel/meteor-pg,因为它有很好的例子。

<强>更新

使用PgSubscription.change更好更简单:

模板:

<template name="hello">
    <label>id</label>
    <input type="number" id="myid" />
    {{#each services}}
    {{id}}
    {{/each}}
</template>

JS

myServices = new PgSubscription('services');

if (Meteor.isClient) {
    Template.hello.helpers({
        services: function () {
            return myServices.reactive();
        }
    });

    function handleInput(event, template) {
        var idVal = template.find("#myid").value;
        console.log("client change detected, new value:");
        console.log(idVal);
        myServices.change(idVal);
    }

    Template.hello.events({
        "keyup #myid": function(event,template) {
            handleInput(event,template);
        },
        "change #myid": function(event,template) {
            handleInput(event,template);
        }
    });
}

if (Meteor.isServer) {
    var PG_CONNECTION_STRING = "postgres://root:root@localhost:5433/parcelService";
    var liveDb = new LivePg(PG_CONNECTION_STRING, "myApp");
    var closeAndExit = function () {
        liveDb.cleanup(process.exit);
    };
    // Close connections on hot code push
    process.on('SIGTERM', closeAndExit);
    // Close connections on exit (ctrl + c)
    process.on('SIGINT', closeAndExit);
    Meteor.publish('services', function (id) {
        console.log("server services, id:");
        console.log(id);
        return liveDb.select(
            'SELECT * FROM services WHERE id = $1', [ id ]
        );
    });
}

旧方法:

在客户端,我为模板定义了ReactiveVar

Template.myForm.created = function () {
    this.asyncServices = new ReactiveVar(["Waiting for response from server..."]);
}

和数据帮助

Template.myForm.helpers({
    myData: function () {
        return Template.instance().asyncServices.get();
    }
});     

现在用

触发行动
 Template.myForm.events({
    'keyup input': function (evt, template) {
        var asyncServicesX = Template.instance().asyncServices;
        Meteor.call('services', params, function(error, response){
            if (error) throw error;
            asyncServicesX.set(response);
        });
    }

最后在服务器端执行sql的方法:

Meteor.methods({
    'services': function (params) {

        Future = Npm.require('fibers/future');
        var future = new Future();
        // Obtain a client from the pool
        pg.connect(PG_CONNECTION_STRING, function (error, client, done) {
            if (error) throw error;
            // Perform query
            client.query(
                    'select * from services where col1=$1 and col2=$2',
                params,
                function (error, result) {
                    // Release client back into pool
                    done();
                    if (error) throw error;
                    future["return"](result.rows);
                }
            )
        });
        return future.wait();
    }
});