Are you sure openLayers isn't available in registerAddressChangeListener? I
don't think you need to use require in there.
Aside from that, I would lean toward a different structure:
- A component, say MyMap, which you put wherever you want the map to be. It
would have a corresponding js, say my-map.js, with a showMap method which is
invoked by MyMap, and a showAddress method which can be called by other modules.
- A mixin, say ShowOnMyMap, which you use in address fields. It would have a
corresponding js, say show-on-my-map.js, which depends on my-map module. On
change of the address field it would call my-map's showAddress function with
the address as a parameter.
This way you can have more than one address field linked to the map.
If you need to use the MyMap component more than once on the same page then
there's more to do, but that's a different problem that I won't cover here.
If there's only one module in the js source file (recommended) then there's no
need to name your module in the source, so in a file called openstreetmaps.js
then this is sufficient:
define([ 'open-layers', 'jquery', 't5/core/console' ], function(openLayers, $,
console) {
// etc
}
I've found that a good structure within each module is to follow the js
structure that comes out of coffeescript, eg. for my-map.js:
define([ 'open-layers', 'jquery', 't5/core/console' ], function(openLayers, $,
console) {
var init = function(clientId) {
// This would probably do what "showMap" does in your example.
}
var showAddress = function(address) {
// etc
}
var otherFunction = function(params) {
}
return {
init : init,
showAddress : showAddress
};
});
The thing I like about this pattern is that it leaves you in no doubt about
what's "public" and what's not.
I'm no JavaScript or RequireJS guru, so I'd also like to hear the opinions of
others.
Geoff
On 17 Jun 2014, at 9:01 am, Sanket Sharma <sanketsha...@gmail.com> wrote:
> Thats odd. I've been noticing my emails to the list appear after a delay -
> not sure whats causing it. And now the code disappears! But thanks for your
> help.
>
> Anyways, in the meantime I already started playing with modules and
> require.js and got it to work. I have a few questions though. I'm not a
> great javascript programmer but I find the AMD approach refreshing and very
> clean. So +1 for AMD in 5.4!
>
> I struggled somewhat finding the right syntax to use between require.js,
> jquery and mixins! So, using my open street maps example, here is what I
> did (and I hope code goes through this time):
>
> To monitor any changes to the textfield component, I defined a mixin:
>
> <t:textfield t:id="addressLineTwo" t:mixins="OpenStreetMaps"/>
>
> In the implementation, class - invoked the module/javascript initialization:
>
> javaScriptSupport.require("openstreetmaps").invoke("registerAddressChangeListener").with(clientElement.getClientId());
>
> and in the openstreetmaps.js:
>
>
> define('openstreetmaps', [ 'open-layers', 'jquery', 't5/core/console' ],
> function(
> openLayers, $, console) {
>
> return {
>
> showMap : function(clientId) {
> var map = new openLayers.Map(clientId);
> map.addLayer(new openLayers.Layer.OSM());
> map.addLayer(new openLayers.Layer.Markers("Markers"));
> map.zoomToExtent();
>
> },
>
> registerAddressChangeListener : function(clientId) {
> $('#addressLineTwo').on('input propertychange paste',function() {
> require([ 'open-layers' ], function(openLayers) {
> console.debug(openLayers);
> })});
> }
>
> };
>
> });
>
> My question/concern is around the code I wrote in
> registerAddressChangeListener. To update the map, I have to use the
> open-layers module. Now, as far as my understanding goes, there is no
> clean/easy way to store a 'reference' to that module locally the openLayers
> module (please correct me here!). So the only way is to define a function,
> which in turn defines in a function in the format:
>
> require(['dependencies'], function(dependencies) {..}
>
>
> The parameter from the define method is available in the return closure
> functions, but as this is an event handler that gets called randomly, the
> context changes and that variable is not available anymore? The tapestry
> JavaScriptSUpport class also seems to follow the same pattern...calling
> require('module name').invoke('parameters').
>
> I guess this more of a Javascript question than a tapestry question - but
> spent last few hours searching for this and could not find anything. Would
> appreciate any help on this matter.
>
>
> Best Regards,
> Sanket
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> On Mon, Jun 16, 2014 at 4:05 PM, Thiago H de Paula Figueiredo <
> thiag...@gmail.com> wrote:
>
>> On Sun, 15 Jun 2014 21:35:34 -0300, Sanket Sharma <sanketsha...@gmail.com>
>> wrote:
>>
>> Hi,
>>>
>>
>> Hi!
>>
>> Now, in my application I have a open street map control that needs to be
>>> updated when a selection/text changes on the form. I was wondering what
>>> is the best way to do it in T5.4?
>>> I can potentially create a Mixin as described in jumpstart:
>>>
>>
>> The code you pasted in your e-mail didn't make it to the mailing list, so
>> we cannot comment on it.
>>
>> Mixins are a very powerful and interesting tool. The scenario you describe
>> seems a good match for a mixin.
>>
>> Not sure if that is the best way? I can also inject script directly
>>> using javaScriptSupport.addScript
>>> or can create a module that gets loaded and initiated when the page
>>> finishes loading..
>>>
>>
>> JavaScriptSupport.addScript() is deprecated, so a module is the way to go
>> in 5.4.
>>
>> --
>> Thiago H. de Paula Figueiredo
>> Tapestry, Java and Hibernate consultant and developer
>> http://machina.com.br
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
>> For additional commands, e-mail: users-h...@tapestry.apache.org
>>
>>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
