SHOW:
|
|
- or go back to the newest paste.
| 1 | var Items = new Meteor.Collection("items");
| |
| 2 | ||
| 3 | if (Meteor.isServer) {
| |
| 4 | // Bootstrap data -- server only | |
| 5 | Meteor.startup(function () {
| |
| 6 | if (Items.find().count() === 0) {
| |
| 7 | Items.insert({title: "item #01", enabled: true, processed: true});
| |
| 8 | Items.insert({title: "item #02", enabled: false, processed: false});
| |
| 9 | Items.insert({title: "item #03", enabled: false, processed: false});
| |
| 10 | Items.insert({title: "item #04", enabled: false, processed: false});
| |
| 11 | Items.insert({title: "item #05", enabled: false, processed: true});
| |
| 12 | Items.insert({title: "item #06", enabled: true, processed: true});
| |
| 13 | Items.insert({title: "item #07", enabled: false, processed: true});
| |
| 14 | Items.insert({title: "item #08", enabled: true, processed: false});
| |
| 15 | Items.insert({title: "item #09", enabled: false, processed: true});
| |
| 16 | Items.insert({title: "item #10", enabled: true, processed: true});
| |
| 17 | Items.insert({title: "item #11", enabled: true, processed: true});
| |
| 18 | Items.insert({title: "item #12", enabled: true, processed: false});
| |
| 19 | Items.insert({title: "item #13", enabled: false, processed: true});
| |
| 20 | Items.insert({title: "item #14", enabled: true, processed: true});
| |
| 21 | Items.insert({title: "item #15", enabled: false, processed: false});
| |
| 22 | } | |
| 23 | }); | |
| 24 | } | |
| 25 | ||
| 26 | var getEnabledItems = function (search1) {
| |
| 27 | return Items.find({enabled: true, title: new RegExp(RegExp.escape(search1 || ""), 'i')});
| |
| 28 | }; | |
| 29 | ||
| 30 | var getProcessedItems = function (search2) {
| |
| 31 | return Items.find({processed: true, title: new RegExp(RegExp.escape(search2 || ""), 'i')});
| |
| 32 | } | |
| 33 | ||
| 34 | if (Meteor.isServer) {
| |
| 35 | Meteor.publish('enabled_items', function (search1) {
| |
| 36 | return getEnabledItems(search1); | |
| 37 | }); | |
| 38 | Meteor.publish('processed_items', function (search2) {
| |
| 39 | return getProcessedItems(search2); | |
| 40 | }); | |
| 41 | } | |
| 42 | ||
| 43 | if (Meteor.isClient) {
| |
| 44 | Meteor.autosubscribe(function () {
| |
| 45 | Meteor.subscribe('enabled_items', Session.get("search1"));
| |
| 46 | Meteor.subscribe('processed_items', Session.get("search2"));
| |
| 47 | }); | |
| 48 | ||
| 49 | Template.main.enabledItems = function() {
| |
| 50 | - | return getEnabledItems(); |
| 50 | + | return getEnabledItems(Session.get("search1"));
|
| 51 | }; | |
| 52 | ||
| 53 | Template.main.processedItems = function() {
| |
| 54 | - | return getProcessedItems(); |
| 54 | + | return getProcessedItems(Session.get("search2"));
|
| 55 | }; | |
| 56 | ||
| 57 | // Basic search filtering | |
| 58 | Session.get("search1", "");
| |
| 59 | Session.get("search2", "");
| |
| 60 | ||
| 61 | Template.main.search1 = function () {
| |
| 62 | return Session.get("search1");
| |
| 63 | }; | |
| 64 | Template.main.search2 = function () {
| |
| 65 | return Session.get("search2");
| |
| 66 | }; | |
| 67 | Template.main.events({
| |
| 68 | "keyup [name='search1']": function (event, template) {
| |
| 69 | Session.set("search1", $(template.find("[name='search1']")).val());
| |
| 70 | }, | |
| 71 | "keyup [name='search2']": function (event, template) {
| |
| 72 | Session.set("search2", $(template.find("[name='search2']")).val());
| |
| 73 | } | |
| 74 | }); | |
| 75 | Template.main.preserve([ | |
| 76 | "[name='search1']", | |
| 77 | "[name='search2']" | |
| 78 | ]); | |
| 79 | } | |
| 80 | ||
| 81 | // Utility, shared across client/server, used for search | |
| 82 | if (!RegExp.escape) {
| |
| 83 | RegExp.escape = function (text) {
| |
| 84 | return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
| |
| 85 | }; | |
| 86 | } | |
| 87 | ||
| 88 | ---------------------- | |
| 89 | ||
| 90 | <head> | |
| 91 | <title>Collection View Test</title> | |
| 92 | </head> | |
| 93 | ||
| 94 | <body> | |
| 95 | {{> main}}
| |
| 96 | </body> | |
| 97 | ||
| 98 | <template name="main"> | |
| 99 | <h1>Collection View Test</h1> | |
| 100 | <div style="float: left; border-right: 3px double #000; margin-right: 10px; padding-right: 10px;"> | |
| 101 | <h2>Enabled Items</h2> | |
| 102 | <input type="text" name="search1" value="{{search1}}" placeholder="search this column" />
| |
| 103 | <ul> | |
| 104 | {{#each enabledItems}}
| |
| 105 | <li>{{title}}</li>
| |
| 106 | {{/each}}
| |
| 107 | </ul> | |
| 108 | </div> | |
| 109 | <div style="float: left;"> | |
| 110 | <h2>Processed Items</h2> | |
| 111 | <input type="text" name="search2" value="{{search2}}" placeholder="search this column" />
| |
| 112 | <ul> | |
| 113 | {{#each processedItems}}
| |
| 114 | <li>{{title}}</li>
| |
| 115 | {{/each}}
| |
| 116 | </ul> | |
| 117 | </div> | |
| 118 | </template> |
