I'm using the mapping plugin to create my client side view model based on an object that gets sent from the server. The object is basic address information ie: address1, address2, city, state, postal, ect...
Once the view model is bound, I want a google maps canvas to update if the user changes the address. I created a computed observable that checks the values entered and calls a map update function. I had this working before when I wasn't using the mapping plugin, ie model was defined locally, but once I introduced mapping I wasn't able to append the computed observable to the view model.
I tried following the instructions from the mapping plugin documentation, but the computed observable isn't triggering updates. I have a custom mapping that calls a mapModel which contains the computed observable as in the examples, but no updates.
Any ideas?
$.getJSON("#Url.RouteUrl("
ContactUs_default ", new { action = "
GetPageModel ", Model.BusinessID})", function(result) {
//create map property
result.Data.Map = null;
var mapping = {
'Map': {
create: function(options) {
return new mapModel(options.data);
}
}
};
var viewModel = ko.mapping.fromJS(result.Data, mapping);
ko.applyBindings(viewModel);
});
var mapModel = function(data) {
ko.mapping.fromJS(data, {}, this);
this.Map = ko.computed(function() {
var address = "";
var enteredElements = 0;
if (this.Address1 != helpText) {
address += " " + this.Address1;
enteredElements++;
}
if (this.Address2 != helpText) {
address += " " + this.Address2;
}
if (this.City != helpText) {
address += " " + this.City;
enteredElements++;
}
if (this.State != helpText) {
address += " " + this.County;
enteredElements++;
}
if (this.PostalCode != helpText) {
address += " " + this.Postal;
}
alert("hi");
//only upate map if enough data has been entered to give accruate location
if (enteredElements >= 3) {
MYMAP.placeMarkers(address);
}
}, this);
};
When you send your data through the mapping plugin, all of your properties will become observables.
This means that you need to access them as a function like like:
if (this.Address1() != helpText) {
address += " " + this.Address1();
enteredElements++;
}
When you access them as observables inside of a computed observables, then it will create a dependency. So, currently your computed observable would get initially evaluated, but it would never update again, as it does not access the value of any observables.
Related
Okay, so I'm fairly new to javascript and I'm working on the front-end of a webapplication for my internship, and this just utterly baffles me.
I have a select and an input element, both of which feed into a message model for a database Procedure Call through .POST(). I've done this in other scripts in the project, but here it won't work no matter how I try to assign the values.
Here's the code:
var cctOldSelect = document.getElementById("ConceptToCopy");
var cctOld = cctOldSelect.options[cctOldSelect.selectedIndex].value;
var cctNew = document.getElementById('NewConceptName').value;
console.log("cctOld: " + cctOld + "; cctNew: " + cctNew);
if (cctOld !== "" && cctNew !== "") {
console.log("model creation started.");
var model = {
p_cct_code_old: cctOldSelect.options[cctOldSelect.selectedIndex].value,
p_cct_code_new: document.getElementById('NewConceptName').value,
p_specialty_layout: null
};
console.log("model creation ended.");
}
console.log("cctOld model: " + model.cctOld + "; cctNew model: " + model.cctNew);
output:
cctOld: 1020H; cctNew: 1021H
model creation started.
model creation ended.
cctOld model: undefined; cctNew model: undefined
I've tried multiple ways:
p_cct_code_Old: $scope.<ElementID> //both with and without .value
p_cct_code_Old: document.getElementById(<ElementID>)
var cctOld = document.getElementById(<ElementID>); p_cctOld: cctOld
None of which work. Why won't it assign a value?
The problem in this case is that you create a new object called "model" and with two attributes called "p_cct_code_old" and "p_cct_code_new", then you are trying to access two attributes called "cctOld" and "cctNew" out of scope.
The JS interpreter when you are trying to access a non existing attributes do not throw an error, instead he return an undefined value.
The thing that I suggest to make the things work is:
var model = {};
var cctOldSelect = document.getElementById("ConceptToCopy");
var cctOld = cctOldSelect.options[cctOldSelect.selectedIndex].value;
var cctNew = document.getElementById('NewConceptName').value;
console.log("cctOld: " + cctOld + "; cctNew: " + cctNew);
if (cctOld !== "" && cctNew !== "") {
console.log("model creation started.");
model.p_cct_code_old = cctOldSelect.options[cctOldSelect.selectedIndex].value;
model.p_cct_code_new = document.getElementById('NewConceptName').value;
model.p_specialty_layout: null;
console.log("model creation ended.");
}
console.log("cctOld model: " + model.p_cct_code_old + "; cctNew model: " + model.p_cct_code_new);
Tell me if this solution helped you !
I've been working with the Microsoft Bot Framework to create a bot that can interface between MS Teams and AWS. I've been trying to write some JS functions but have been unsuccessful in getting them to operate how I want them to.
Here is what I am currently working on and am stuck on:
I am creating a 'ping' like functionality so a bot user can ping an instance in AWS and receive its status whether its running and has passed the system checks or not. My code is currently able to take the user request for the ping, retrieve the information from AWS, and can even print that info to the console. However, when I am trying to retrieve that information back out of the object that I set it to and print it to MS Teams, it says my variable is undefined.
Some code snippets are below:
class aws_Link {
constructor (mT, ping_1, i_state, i_status) {
this.myTag = mT;
this.ping = ping_1;
this.instance_state = i_state; // I declare this here, but should I?
this.instance_status = i_status; // I declare this here, but should I?
}
//i_state and i_status are just passed NULL when the object is initialized
//so they would be holding some value, not sure if I have to do this
api_link () {
var mainLink = API_LINK_TAKEN_OUT_FOR_OBVIOUS_REASONS;
var myTagFill = "myTag=";
var ampersand = "&";
var pingFill = "ping=";
var completeLink = String(mainLink + myTagFill + this.myTag + ampersand + pingFill + this.ping);
var finalLink = completeLink;
finalLink = finalLink.split(' ').join('');
//set up API-key authenticication
var options = {
url: finalLink,
headers: {
'x-api-key': 'AWS-PRIVATE-TOKEN'
}
};
if(this.ping == "TRUE") { // if the user wants to use /ping
var res = request(options, function(error, response, body) {
console.log("PING REQUEST"); //debug
body = JSON.parse(body);
var h_state = body['instanceState'];
var h_status = body['instanceStatus'];
this.instance_state = h_state;
this.instance_status = h_status;
console.log("STATE: " + h_state); //debug
console.log("STATUS: " + h_status); //debug
});
}
}
pingFunction () {
var tmp = "Instance State: " + this.instance_state + " Instance Status: " + this.instance_status;
return tmp;
}
}
And here is where I call the api_link() function and pingFunction():
var apiLink1 = new aws_Link("MY_TAG_VALUE", "TRUE", "NULL", "NULL");
var completeAPILink = apiLink1.api_link();
session.send('Request complete.');
session.send("PING: " + apiLink1.pingFunction());
So essentially the user enters in some info which gets passed to where I create the "new aws_Link" which then a my understanding is, creates an object called apiLink1. From there, it makes the request to AWS in my api_link() function, which retrieves the info I want. I thought I was then saving this info when I do the: this.instance_state = h_state; & this.instance_status = h_status;. So then when I call pingFunction() again on apiLink1, I thought I would be able to retrieve the information back out using this.instance_state and this.instance_status, but all it prints out is undefined. Any clarification on why my current code isn't working and any changes or improvements I can make would be greatly appreciated.
Thanks!
I have a Scala PlayFramework function that calls MongoDB and gets a Future[Seq[Document]] result. After a map zoom/pan event, this Play Action function is called from JavaScript on a web page via xhttp/GET. My Action method on the Play side returns before the Future's onComplete/Success is executed. So I'm looking for a way to call a JavaScript function to get the data when the Scala Future's onComplete/Success fires. How would I do that, or am I looking at this wrong?
Here is the code in question.
def rect(swLon: Float, swLat: Float, neLon: Float, neLat: Float) = Action {
val sb = new StringBuilder()
sb.append("<tt>boundingBox: swLon=" + swLon + ", swLat=" + swLat + ", neLon=" + neLon + ", neLat=" + neLat + "</tt>")
if (oDb.isDefined) {
val collection: MongoCollection[Document] = oDb.get.getCollection(collectionName)
val fut = getFutureOne(collection) // returns a Future[Seq[Document]]
fut onComplete {
case Success(docs) => { for (doc <- docs) { setMongoJson(doc.toJson } }
case Failure(t) => { println("FAIL: " + t.getMessage) }
}
}
Ok(sb.toString)
}
// below is temporary until I figure out a better way to store/return the result when it comes in
private var mongoJson: String = ""
private def setMongoJson(s: String): Unit = mongoJson = s
getFutureOne is temporary, it just does a db.collection.find().first().toFuture. I just wanted to make sure my connection to MongoDB was working, and it is. In actual fact I'll replace it with a query to return data that falls within the bounding box.
Action is not designed to work with futures. Use Action.async, which will "wait" (technically not wait, but schedule) for the future to finish:
def rect(swLon: Float, swLat: Float, neLon: Float, neLat: Float) = Action.async {
val sb = new StringBuilder()
sb.append("<tt>boundingBox: swLon=" + swLon + ", swLat=" + swLat + ", neLon=" + neLon + ", neLat=" + neLat + "</tt>")
if (oDb.isDefined) {
val collection: MongoCollection[Document] = oDb.get.getCollection(collectionName)
val fut = getFutureOne(collection) // returns a Future[Seq[Document]]
fut.map {docs =>
setMongoJson(doc.toJson)
Ok(sb.toString)
} recover {
case e => BadRequest("FAIL: " + e.getMessage)
}
} else Future.successful(Ok("Not defined"))
}
Take a look at this for reference:
https://www.playframework.com/documentation/2.4.x/ScalaAsync
I need to update a bunch of objects at once, and I can't find an efficient way to do it all at once since the docs suggest calling .getObjectInBackgroundWithID. I don't have ID's to every object, and even if I did I couldn't pass them all in.
Questions:
1) It would make more sense to call this function in Cloud Code than to handle this all on the client side, right?
2) What's the best way of updating many objects with the same value in a for loop in JS (Cloud Code)/Swift?
I think you're looking for a query with .findObjects (and its variants) then use PFObject's class method .saveAll (and its variants) to save the array of objects.
Here's a sample:
var query = PFQuery(className:"GameScore")
query.whereKey("playerName", equalTo:"Sean Plott")
query.findObjectsInBackgroundWithBlock {
(objects: [AnyObject]?, error: NSError?) -> Void in
if error == nil {
// The find succeeded.
println("Successfully retrieved \(objects!.count) scores.")
// Do something with the found objects
if let objects = objects as? [PFObject] {
for object in objects {
println(object.objectId)
// Do your manipulation
}
// Save your changes to ALL objects
PFObject.saveAllInBackground(objects, block: {
(succeeded: Bool, error: NSError!) -> Void in
if (error == nil) {
println("Successfully saved \(objects!.count) objects.")
} else {
// Log details of the failure
println("Error: \(error!) \(error!.userInfo!)")
})
}
} else {
// Log details of the failure
println("Error: \(error!) \(error!.userInfo!)")
}
}
CloudCode sample:
var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", "Dan Stemkoski");
query.find({
success: function(results) {
alert("Successfully retrieved " + results.length + " scores.");
// Do something with the returned Parse.Object values
for (var i = 0; i < results.length; i++) {
var object = results[i];
alert(object.id + ' - ' + object.get('playerName'));
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
I am trying to use the titanium reverseGeocoder but I am having a strange issue which I think is a "scope" issue. I can't quite understand why the last log call I make returns null values when I have defined the variables in that scope.
var win = Titanium.UI.currentWindow;
Ti.include('includes/db.js');
var city = null;
var country = null;
Titanium.Geolocation.reverseGeocoder( Titanium.UI.currentWindow.latitude,
Titanium.UI.currentWindow.longitude,
function(evt) {
var places = evt.places;
if (places && places.length) {
city = places[0].city;
country = places[0].country;
}
Ti.API.log(city + ', ' + country); // <<< RETURNS CORRECT VALUES
});
Ti.API.log(city + ', ' + country); // <<< RETURNS NULL VALUES
This is an async call as Davin explained. You will have to call a function within the reverse geocode function.
A suggestion I can give you is to work event-based. Create events, and fire events. An example:
Titanium.UI.currentWindow.addEventListener('gotPlace',function(e){
Ti.API.log(e.city); // shows city correctly
});
Titanium.Geolocation.reverseGeocoder( Titanium.UI.currentWindow.latitude,
Titanium.UI.currentWindow.longitude,
function(evt) {
var city, country, places = evt.places;
if (places && places.length) {
city = places[0].city;
country = places[0].country;
}
Ti.API.log(city + ', ' + country); // <<< RETURNS CORRECT VALUES
Titanium.UI.currentWindow.fireEvent('gotPlace',{'city': city, 'country': country});
});