getGMap() returns an instance of the Map object. If the map is not ready, this function returns undefined. Is there an event or a way which tells that the Map is ready and that calling the getGMap will surely return the Google Map?
Thanks
Yash
You can use the uiGmapIsReady within your controller - see IsReady in docs.
uiGmapIsReady returns:
- a promise once the map is loaded and ready
- an array of map info (which i've called map_instances)
-- the array length depends on how many maps you have loaded in your page
-- each object in the array includes the google map object
To use getGmap() ready on your control object would then look like this:
HTML
<div ng-app="myApp" ng-controller="myController">
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
control="map.control">
</ui-gmap-google-map>
</div>
CONTROLLER
myApp.controller('myController', function ($scope, uiGmapIsReady) {
$scope.map = {
center : {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom : 14,
control : {}
};
uiGmapIsReady.promise()
.then(function (map_instances) {
var map1 = $scope.map.control.getGMap(); // get map object through $scope.map.control getGMap() function
var map2 = map_instances[0].map; // get map object through array object returned by uiGmapIsReady promise
});
});
Note how you can also access the map object through two methods:
- via the map_instances array (which looks like [map1Instance, map2Instance, ...])
- via $scope.map.control.getGMap() as long as you've defined it in your html and $scope
JSFIDDLE
You could attach to the tilesloaded event by passing it into the "events" property of the map options. tilesloaded fire after a tile is loaded on the map (therefore the map is loaded).
Related
I have a property name
var viewModel = observableModule.fromObject({
name: "abcd",
onUsernameChanged: function () {
console.log("-->"+ viewModel.name)
}
});
textfield like below,
<TextField text="{{name}}" textChange="{{ onUsernameChanged }}"
class="h2 description-label" />
When I change the text by typing, It always prints --->abcd only.
Why the viewmodel property is not updated ?
Playground Demo of problem
currently I'm reading the changed text like below, And this method is not flexible and easy to use like viewmodel
var view = require("ui/core/view");
var idUsername = view.getViewById(args.object, "idUsername");
By taking a look at your code, I am inferring that there is no binding between your view (the XML file containing the TextField—assuming you are using NativeScript Core) and your view-model (the javascript file where you have your observable viewModel).
When the textChange event emits, you are printing the stored value at your ViewModel over and over (name, in this case: abcd). For example, at first, your value is abcd, but the text might be empty. Later, you type A, and then it prints abcd again, and so on.
If you want to print the new text output TextField element, you have to use the output emitted by the event. Look at this excerpt:
const viewModel = observableModule.fromObject({
name: "abcd",
onUsernameChanged: function (eventData) {
// eventData has information on the textChange event
console.dir(eventData);
// Do whatever you want with this data, such as updating the view model
}
});
try using this.get()
console.log("-->"+ this.get('name'))
Please be patient - I am a beginner in programming. Tester for long time but programming is not my domain.
My test is:
from the backend I get some list with some element (e.g. 5 text strings)
I click some element on page which displayed those 5 elements (of course I don't know if listed elements are correct or not)
I need to check if list of elements displayed on ui is the list received from backend
Problem:
I cannot access the elements by Nightwatch api css selector, at least I could not manage (Angular app) to do it with Nightwatch
I found I could do it with .execute()
My code is (failing):
browser
.click(selector.HEADER.APPS_GRID, function () {
for (var app in appsList) {
let appShortName = appsList[app].shortName
let appLongName = appsList[app].longName
let appUrl = appsList[app].url
let appVisibility = appsList[app].visibility
browser.execute(function(app){
var appShortNameDisplayed = document.getElementsByClassName('logo-as-text')[app].innerText
var appLongNameDisplayed = document.getElementsByClassName('app-name')[app].innerText
return [appShortNameDisplayed, appLongNameDisplayed]
}, function(result){
console.log(result.value[0])
})
}
})
It fails in lines:
var appShortNameDisplayed = document.getElementsByClassName('logo-as-text')[app].innerText
var appLongNameDisplayed = document.getElementsByClassName('app-name')[app].innerText
unfortunately I have to make query with [app] - iterating by elements of object. If I skip [app].innerText I get some data like element-6066-11e4-a52e-4f735466cecf instead of text values displayed on page
I get error:
Error while running .executeScript() protocol action: TypeError: document.getElementsByClassName(...)[app] is undefined
Is it possible to pass the "app" param (counter) to the document query?
Or is it the way I have to make one query that will return as many data as necessary and then handle data returned in this block
function(result) {
console.log(result.value[0])
})
The fragment of html page is
<div _ngcontent-c8="" class="ep-app-icon mt-auto mb-auto text-center logo-as-text"> XXX </div>
... and I need to get this "XXX" text.
As your own comment suggests, there is an args argument to .execute that is an array. The array elements will be the arguments in the function passed to execute.
See https://nightwatchjs.org/api/commands/#execute
.executeAsync(function(){
var buttons=document.getElementsByTagName('button');
buttons[2].click();
return buttons;
},[],function(result){
console.log('done')
})
Try Async it works for sure
I have been using Ammap Library and created Map.
https://www.amcharts.com/demos/custom-html-elements-map-markers/
I want to delete Map images object by using method(), Details are in below link.
Could any one let me know how to use this method()
https://docs.amcharts.com/3/javascriptmaps/MapImage#deleteObject
Method Name:"deleteObject()"
Thanks in Advance
deleteObject is a member method of the image/object itself, so you just call it from the object you want to delete, e.g.
image.deleteObject();
If your map is using custom HTML elements like in the demo, you also need to remove the div generated in your createCustomMarker method by calling removeChild in the DOM. You need to be able to access that div somehow, so I recommend modifying it to set the div's id to something you can look up later like the image's id:
// this function creates and returns a new marker element
function createCustomMarker(image) {
// create holder
var holder = document.createElement("div");
holder.className = "map-marker";
holder.title = image.title;
holder.id = image.id; //added to make div lookup easier
// ...
}
This modification assumes you set an id in your images, which is also recommended since you can use the getObjectById method to get the image object and call its deleteObject method.
Here's a sample function that deletes both the image and custom marker when an image ID is provided:
function deleteImage(imageId) {
var image = map.getObjectById(imageId);
var imageDiv;
if (image) {
image.deleteObject(); //delete the ammap image object
imageDiv = document.getElementById(imageId); //get the custom marker div
imageDiv.parentNode.removeChild(imageDiv); //remove it from the DOM
}
}
Demo - Click on the buttons to delete the corresponding marker.
I'm trying to experiment here. I want to build a component that auto populates some data from an ajax request after mounting. Something like this:
var AjaxComponent = React.createClass({
getInitialState: function() {
return {
data: {}
};
},
render: function() {
return (
<div>
{this.state.data.text}
</div>
);
},
componentDidMount: function() {
makeAjaxResquest(this.props.url).then(function(response){
this.setState({
data: response.body // or something
});
}.bind(this));
}
});
With that example component, I'd use <AjaxComponent url="/url/to/fetch" /> to display the content.
Now, what if I'd like to access different bits of data from children elements? Can I do something like this?
<AjaxComponent url="/url/to/fetch">
<div>
<header>{RESPONSE.title}</header>
<div>
{RESPONSE.text}
</div>
</div>
</AjaxComponent>
No problem if it doesn't render anything before the ajax request ends. The thing is how could I pass the data for children to render, not as props. Is it possible?
I had a similar scenario where I had similar Components that would query data from different APIs. Assuming you know the expected response from a given API, you could do it the same way perhaps.
Essentially make a generic Component where it props functions as an "API" of sorts, then define different types of sub components and their associated render function.
For example:
In widget, you then do something like this, where widgets is just a plain javascript file with a bunch of functions:
componentDidMount: widgets[type].componentDidMount(),
render: widgets[type].render().
In widgets, it would be like this:
var widgets = {
widget1: {
componentDidMount: function () {
//Ajax call..
},
render: function() {
//How should I draw?
}
},
widget2: //Same format, different functions
Then in some parent component you simply go
< Widget type="widget1" \>
or whatever.
There are a couple weird things about this that probably don't sit right with React. First off, you should take state all the way up to the top-level component, so I wouldn't do my ajax calls in componentDidMount...I'd more likely get the data I want for the widgets I want to render at a higher level, then pass that in as a prop too if it won't change until I make another API call (thinking Flux style flow here). Then, just pass in the data as a prop as well and just specify the render functions:
< Widget data={this.state.data[0]} type=widget1 />
The "gotcha" here is that you are making an assumption that whatever is in this data prop will match what you need in the widget type. I would pass in an object, and then validate it all in the render function etc.
That's one way. Not sure if it's valid, I'm sure someone who knows more could pick it apart but it suited my use case and I now have a library of similar components that I can selectively render by passing in data and a type, then looking up the appropriate render function and checking to make sure the data object contains everything I need to render.
So I have been adding my events thusly:
element.addEvent('click', function() {
alert('foobar');
});
However, when attempting to remove said event, this syntactically identical code (with "add" switched to "remove") does not work.
element.removeEvent('click', function() {
alert('foobar');
});
I assume this is because the two functions defined are not referenced the same, so the event is not technically removed. Alright, so I redefine the event addition and removal:
element.addEvent('click', alert('foobar'));
element.removeEvent('click', alert('foobar'));
Which works great, except now when the page loads, the click event is fired even before it's clicked!
The function is removed, though, which is great......
update: when you do .addEvent('type', function(){ }) and .removeEvent('type', function(){ }), even though the functions may have the same 'signatures', they are two separte anonymous functions, assigned on the fly. function 1 is !== to function 2 - hence there is no match when MooTools tries to remove it.
to be able to remove an exact handler, o:
function handler(){ ... }
el.addEvent('click', handler);
// .. later
el.removeEvent('click', handler);
Internally, events are actually a map of keys to functions in element storage. have a look at this fiddle i did a while back for another SO question - http://www.jsfiddle.net/mVJDr/
it will check to see how many events are stacked up for a particular event type on any given element (or all events).
similarly, removeEvent looks for a match in the events storage - have a look on http://jsfiddle.net/dimitar/wLuY3/1/. hence, using named functions like Nikolaus suggested allows you to remove them easily as it provides a match.
also, you can remove events via element.removeEvents("click") for all click events.
your page now alerts because you pass on alert as the function as well as execute it with the params 'foobar'. METHOD followed by () in javascript means RUN THE METHOD PRECEDING IT IMMEDIATELY, NOT LATER. when you bind functions to events, you pass the reference (the method name) only.
to avoid using an anonymous function and to pass argument,s you can do something like:
document.id('foobar').addEvent('click', alert.bind(this, 'foo'));
as bind raps it for you, but removing this will be even more complicated.
as for event delegation, it's:
parentEl.addEvents({
"click:relay(a.linkout)": function(e, el) {
},
"mouseover:relay(li.menu)": function(e, el) {
}
});
more on that here http://mootools.net/docs/more/Element/Element.Delegation#Element:removeEvent
keep in mind it's not great / very stable. works fine for click stuff, mouseenter is not to be used delegated, just mouseover - which means IE can fire mouseout when it should not. the way i understand it, it's coming improved in mootools 2.0
edit updating to show an example of bound and unbound method within a class pattern in mootools
http://www.jsfiddle.net/wmhgw/
var foo = new Class({
message: "hi",
toElement: function() {
return this.element = new Element("a", {
href: "http://www.google.com",
text: "google",
events: {
"click": this.bar.bind(this), // bind it
"mouseenter": this.bar // unbound -> this.element becomes this
}
});
},
bar: function(event) {
event.stop();
// hi when bound to class instance (this.message will exist)
// 'undefined' otherwise.
console.log(this.message || "undefined");
}
});
document.id(new foo()).inject(document.body);
the mouseenter here will be unbound where this will refer to the default scope (i.e the element that triggered the event - the a href). when bound, you can get the element via event.target instead - the event object is always passed on to the function as a parameter.
btw, this is a slightly less familiar use of class and element relation but it serves my purposes here to illustrate binding in the context of classes.
assig the function to a variable and use the same reference to add and remove the event.
if you use an anonymous function you will get to different references
var test = function(){ alert('test: ' + this.id); }
$('element').addEvent('click', test);
...
$('element').removeEvent('click', test);
addEvent : Attaches an event listener to a DOM element.
Example -
$('myElement').addEvent('click', function(){
alert('clicked!');
});
removeEvent : Works as Element.addEvent, but instead removes the specified event listener.
Example -
var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
$('myElement').addEvent('click', destroy);
//later...
$('myElement').removeEvent('click', destroy);
This means when you add an event with a eventhandler not an anonymous function if you than remove the event than it will be removed.