Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Two independent search fields; "global variables" #2402

Closed
nschloe opened this issue Aug 14, 2014 · 3 comments
Closed

Two independent search fields; "global variables" #2402

nschloe opened this issue Aug 14, 2014 · 3 comments

Comments

@nschloe
Copy link

nschloe commented Aug 14, 2014

I'm trying to create a page that features two independent search fields, based on the same template. If I interpret the Meteor best practices correctly, the search queries are best stored in the global Session variable, from where other data processors can source.

Now, the problem that appears is that I don't know how to best discriminate between the two search fields: Both obviously store their values in the same Session variable.

This problem appears to be tightly connected with the fact that Session essentially serves as a hub for global variables, the use of which is discouraged in many other frameworks (e.g., angular, backbone; for good reasons it seems here). Data belonging to a template instance (controller) is also stored in the instance. In bug #1529, a similar problem is discussed (and solved by adding yet another global variable).

Has this problem come up before? Is there a best practice for avoiding global Session variables? Any other suggestions?

MWE:

<body>
  <div id="outer">
    {{> search}}<br/>
    {{> search}}
</div>
</body>

<template name="search">
  <input id="searchInput" type="text" />
  <span class="name">{{string}}</span>
</template>

if (Meteor.isClient) {
  Template.search.events = {
    'keyup #searchInput': function (evt) {
        Session.set("query", evt.currentTarget.value);
    }
  };

  Template.search.string = function() {
    return Session.get("query");
  };
}
@nschloe nschloe changed the title Two independent search fields; "global varialbles" Two independent search fields; "global variables" Aug 14, 2014
@andrenarchy
Copy link

Besides allowing multiple independent instances of a template, local variables also vastly improve the readability and maintainability of code.

@andrenarchy
Copy link

I just realized that there is a ngMeteor package which provides angularjs for meteor. If this package is loaded and the template/js code is replaced with

<template name="search">
  <div ng-controller="SearchCtrl">
    <input type="text" ng-model="query">
    [[query]]
  </div>
</template>

and

if (Meteor.isClient) {
  ngMeteor.controller("SearchCtrl", function() {});
}

then each controller gets its own scope where query is stored. That's the way I like it! 😄 Also note how much shorter the js code is due to the 2-way databinding in angularjs.

A natural question arises: why doesn't meteor simply draw on another frontend framework which already has solved all these issues related to global variables?

Anyway, I'm pleased to see that meteor just works™ with angularjs.

@glasser
Copy link
Contributor

glasser commented Aug 15, 2014

"How can I do this?" questions are best posed on StackOverflow or the meteor-talk mailing list, not our bug tracker. Good luck!

(Making this stuff easier is part of this task on our roadmap soon: https://trello.com/c/Jg9N9F1l/62-new-object-oriented-api-for-ui-components But it is possible today, just not as nice as it should be.)

@glasser glasser closed this as completed Aug 15, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@glasser @nschloe @andrenarchy