I'm working with Dust.js and trying to use the dust.makeBase function to merge and render data from two arrays (datax and datay) in an newcontext variable.
var context = dust.makeBase();
var newcontext = context.push(datax)
.push(datay);
As Dust documentation the last array pushed (in my sample the datay) become the current context. Launching on jsFiddle i can see that data got from current context are displayed correctly.
Selfstorage Information
{#.}
{#data}{id} - {special_offer}
{/data}
{/.}
However when i came display data out of current context apparently the data is not reached. The following not work.
Selfstorage Facilities
{#.}
{#facility}
{id} - {size}
{#facilityamenities.amenities}{amenities_id} - {full_desc}
{/facilityamenities.amenities}
{/facility}
{/.}
I have got some instructions on http://www.dustjs.com/guides/contexts/ but it isn't enough.
Checking some examples on web i was trought context helpers and i came out with this version on jsfiddle and although a function code is executed the result isn't as expected. Below a piece of code.
var context = dust.makeBase({"getselfdata": {
"selfdata": function(chunk, context)
{
var price = context.get("facility.price_formatted");
return price;
}
}});
Any help is appreciate.
You are exactly correct that the last item pushed onto the context becomes the current context. If you push multiple items onto the context, there is no way to reference them by position, for example "the item pushed onto the context before this one".
If you provide Dust a reference that doesn't exist in the current context, Dust will search each previous context for the reference. This allows you to walk up the context stack.
I have made two changes to your example to get it to work. For datax, I wrapped the array in an object with one key, facilities:
{ "facilities": [
{ "facility": { ... } },
{ "facility": { ... } }
]}
Then, in your template, I told Dust to search for this reference:
{#facilities}
{#facility}
<tr><td>{id} - {size} - {#facilityamenities}{#amenities}
{amenities_id} - {full_desc}
{/amenities}{/facilityamenities}</td></tr>
{/facility}
{/facilities}
You had one additional bug in this template. For {#facilityamenities.amenities} to work, your data would need to look like this:
{ "facilityamenities": {
"amenities": { ... } }
However, your "facilityamenities" is an array, so instead you should use {#facilityamenities}{#amenities} so that Dust will first loop over facilityamenities, and then search for amenities.
With these changes your JSFiddle works as I believe you intend.
Related
I have seen multipath update example. But before updating any data i have to push it at first place for which i was wondering if there is something called as multipath push?
I want to simultaneously push data under different set of nodes.
eg: Firebase scheme
-Examinations
- pushIdLk12203425
- pushIdML0124245
-RightChoices
- pushIdLk12203425
- pushIdML0124245
-Questions
- pushIdLk12203425
- pushIdML0124245
When i push value under examination node, same values or different values as per my backend architecture have to be pushed under RightChoices and Questions Node. Right now i am doing this using .then callback approach.
I push data under Examinations and then in its .then callback i push in RightChoice and Questions node.
But my concern is what if user closes the app and data just reaches Examinations node and never reaches RightChoices and Questions Node.
I am trying to figure out a better way of having data consistency.
Thanks.
Note: RightChoices and Questions are kept under different nodes for having a better security architecture and i cannot change the schema.
Would be grateful if somebody can help me out. Thanks.
I think you are looking for .update()
Have a look here: https://firebase.google.com/docs/database/web/read-and-write#update_specific_fields:
function writeMultipath(pushID1, pushID2) {
var data = {
id1: pushID1,
id2: pushID2
};
// Write the new data simultaneously to your DB-locations
var updates = {};
updates['/Examinations/'] = data;
updates['/RightChoices/'] = data;
updates['/Questions/'] = data;
return firebase.database().ref().update(updates);
}
I am not able to move on to the next section since i could not understand how this works. For reference I will post the link.
http://eloquentjavascript.net/1st_edition/chapter7.html
var roads = {};
function makeRoad(from, to, length) {
function addRoad(from, to) {
if (!(from in roads))
roads[from] = [];
roads[from].push({to: to, distance: length});
}
addRoad(from, to);
addRoad(to, from);
}
I am totally lost to get the basic idea of this function. Anyone who is generous to help. Thank you in advance. you are always help me to unlock many concepts.
It works by defining a function inline (addRoad) and then calling it to add a road in each direction (from to to and then to to from).
addRoad maintains a data structure of roads:
"roads": [
"fromLocation" : [ "destination1", "destination2" ],
"fromLocation2" : [ "destination3" ]
]
addRoad first checks to see if the from location exists in the array of roads (that's the if (!(from in roads)) clause. If it doesn't exist then it creates an empty array to store future destinations. It can then add the destination to that array.
To create my example data structure above I could call addRoad as follows:
addRoad('fromLocation', 'destination1');
addRoad('fromLocation', 'destination2');
addRoad('fromLocation2', 'destination3');
I'm doing a Linked List data structure. The prototype includes a method to pop (delete) the last item from the list which I'm attempting to do by finding the last object, and then setting it to null. It does not seem to work. What does work is setting the reference (the 'pointer') in the previous object to null. I'm still a relative JS OOP newbie, can't get my brain to understand why. The code:
function LinkedList() {
this._rootNode = null;
this._length = 0;
}
LinkedList.prototype = {
push: function(data) {
var newNode = {
data: data,
nextNode: null
};
// initialize this._rootNode or subsequent .nextNode with newNode
this._length++;
},
pop: function() {
var selectedNode, perviousNode;
if ( this._rootNode ) {
if ( this._length > 1 ) {
selectedNode = this._rootNode;
while ( selectedNode.nextNode ) {
previousNode = selectedNode; // <-- shouldn't need this?
selectedNode = selectedNode.nextNode;
}
selectedNode = null; // <-- doesn't delete it
// previousNode.nextNode = null; // <-- works (but feels unnecessary?)
} else {
this._rootNode = null;
}
this._length--;
}
},
// more methods..
};
/* --- Main Prorgam --- */
var list = new LinkedList();
list.push('AAA');
list.push('BBB');
list.pop();
console.log(list._rootNode.nextNode.data); <-- 'BBB' still there
Would appreciate some insight, and any other tips on improving the function. Thanks!
I guess you realize that your push method doesn't work, but you haven't asked about that one.
If you are doing some kind of school project that requires you to write a linked list like this, then by all means, continue. Your issue is that selectedNode is not really "the node itself", it's a reference to it, and you're just setting that reference to null while the previous item's nextNode pointer still refers to it, so you haven't actually removed it from your list. You would actually do so by un-commenting the line setting that pointer to null, which means you also have to leave in the line saving the reference to the previous node.
previousNode.nextNode = null;
You actually don't want to delete the node entirely with pop(), you want to return it. Once you remove the reference to the popped node in your calling function though, it will be the last reference and the object will be made available for garbage collection. This is (to my knowledge) how all traditional OOP languages handle linked lists at the basic level.
Which brings me to my next point, that most OOP languages you'll use these days don't actually require you to work on the basic level. Most of them have libraries that will implement linked lists for you and Javascript in particular essentially implements a linked list-style data structure in its array syntax. To the point where ([1,2,3,4]).pop() evaluates to 4 and ([1,2,3,4]).push(5) evaluates to [1,2,3,4,5]. If you actually need to USE a linked list in a real project, just don't.
The short description of the functionality that we are trying to achieve: we have a list of source objects on the left, a person can drag new items from the list to a list on the right, items thus get added to the list on the right; they can also remove items from the list on the right. The list on the right then gets saved whenever it is changed. (I don't think the specifics of how/where it is being saved matter...)
I am having a problem with a bit of timing in the JavaScript vs. DOM elements realm of things. Items that are already on the list on the right can be removed. We have some code that fires on a 'remove/delete' type icon/button on a DOM element, that is supposed to remove the element from the DOM visually and permanently (i.e. it doesn't need to be brought back with a 'show'). This visual change should then also show up in the JSON object that is built when the JS traverses the DOM tree to build the new updated list.
However, this chunk of JS code that runs immediately after this .remove() is called, the element that should have just been removed still shows up in the JSON object. This is not good.
Here are what I believe to be the relevant bits of code operating here. This lives in a web browser; much of this is in the document.ready() function. A given list can also have subsections, hence the sub-list parts and loops.
The on-click definition:
$('body').on('click', '.removeLine', function() {
var parent=$(this).parent().parent().parent(); //The button is a few DIVs shy of the outer container
var List=$(this).closest('article'); //Another parent object, containing all the
parent.fadeOut( 300,
function() {
parent.slideUp(300);
parent.remove();
}
);
sendList(List); // This builds and stores the list based on the DOM elements
});
And then later on, this function definition:
function sendList(List) {
var ListArray=[],
subListArray=[],
itemsArray = [],
subListName = "";
var ListTitle = encodeText(List.find('.title').html());
// loop through the subLists
List.find('.subList').each(
function(index, element) {
subListName=($(this).find('header > .title').html()); // Get sublist Title
subListID=($(this).attr('id')); // Get subList ID
// loop through the line items
itemsArray=[];
$(this).find('.itemSearchResult').each(
function(index, element) {
// Build item Array
if( $(this).attr('data-itemid')!= item ) {
itemArray.push( $(this).attr('data-itemid'));
}
}
);
// Build SubList Array with items Array
subListArray.push(
{
"subListName": subListName,
"subListID" : subListID,
"items" : itemsArray
}
);
}
); <!-- end SubList Loop -->
// Complete List Array with subListArray
ListArray ={
"ListName": ListTitle,
"ListID": List.attr('id'),
"subLists": subListArray
};
// Send New List to DataLists Object - the local version of storage
updateDataLists(ListArray);
// Update remote storage
window.location= URLstring + "&$Type=List" + "&$JSON=" + JSON.stringify(ListArray) + "&$objectID=" + ListArray.ListID;
};
It seems to be the interaction of the 'parent.remove()' step and then the call to 'sendList()' that get their wires crossed. Visually, the object on screen looks right, but if we check the data being sent to the storage, it comes through WITH the object that was visually removed.
Thanks,
J
PS. As you can probably tell, we are new at the Javascript thing, so our code may not be terribly efficient or proper. But...it works! (Well, except for this issue. And we have run into this issue a few times. We have a workaround for it, but I would rather understand what is going on here. Learn the deeper workings of JS so we don't create these problems in the first place.)
There's a few things going on here, but I'm going to explain it by approaching it from an asynchronous programming perspective.
You are calling sendList before the element gets removed from the DOM. Your element doesn't get removed from the DOM until after your fadeOut callback gets executed (which takes 300ms).
Your sendList function gets called immediately after you begin the fadeOut, but your program doesn't wait to call sendList until your fadeOut is finished - that's what the callback is for.
So I would approach it by calling sendList in the callback, after your DOM element has been removed like this:
$('body').on('click', '.removeLine', function() {
var el = $(this); //maintain a reference to $(this) to use in the callback
var parent=$(this).parent().parent().parent(); //The button is a few DIVs shy of the outer container
parent.fadeOut( 300,
function() {
parent.slideUp(300);
parent.remove();
sendList(el.closest('article'));
}
);
});
First things first: I'm not sure whether the information that I'm going to provide will be enough, I will happily add additional information if needed.
I'm serializing a complex structure into the JSON-Format, Field[i][0] is the "this"-reference to an object.
Firebug's Output on JSON.Stringify(myObj)
This is all fine and working as long as I keep it all JS. But now I have the requirement to serialize and send it to my backend to get the reference + computed information back.
Now how do I map back to the reference I had before? How do I bind this ref back to an Object?
This $$hash thing looks internal and proprietarish so I havent even bothered trying something like Object[$$hash] = ref or whatever.
This general idea probably seems pretty whack, but the result is returned asynchrously and I need an identifier to bind the new information back to the original object. Obviously I could just make up my own identifier for that, but I was wondering whether there's an option to solve it this way.
EDIT
The objects are created like this (likewise)
var arrayOfObj = []
arrayOfObj.push(new Object.With.SomeSettersAndGetters());
The Object has a method like
function GetRef(){
return this;
}
Which I'm using to keep a ID/Ref through my code.
Thank you!
Update
If you want to update a series of instances and make many Ajax requests, then you need to look at Ajax long polling and queueing techniques. You won't be able to preserve the reference, but regardless of what Ajax technique you use, make use of the below trick to preserve the reference.
Add long polling on top and you're good to go.
The idea is this:
Assume the server will respond in JSON format. If you need to refer to the original references, here's my two cents:
Update the exact references when the server replies. Say you have 10 instances of Something stored in an array. On a successful response, you use the methods in the Something class to update the specific instances in whatever way you want.
/**
* The array with something instances.
* #type {Array.<Something>}
*/
var instances = [];
/**
* The Ajax success function.
* #param {Event} event The event object.
*/
function ajaxSuccess(event) {
var response = event.target.getResponseText();
var actualResponse = JSON.parse(response);
for (var i = 0, len = actualResponse.length; i++) {
instances[i].setWhatever(actualResponse[i].whatever);
};
};
The above is a more procedural approach. If you want full blown OOP in JS, then you think in modular design patterns. Say you have a module that loads data into some place. Basically, everything related to that module is an instance property.
var myModule = function() {
this.whatever = 1;
};
myModule.prototype.loadMore = function() {
var request = new XMLHttpRequest(),
that = this; // store a reference to this.
request.send(); // etc
request.onreadystatechange = that.onSucess;
};
myModule.prototype.onSucess = function(event) {
var response = JSON.parse(event.target.getResponseText());
this.whatever = response.whatever;
};
var moduleInstance = new myModule();
myModule.loadMore();
// Now the scope is always preserved. The callback function will be executed in the right scope.
Let's assume on the backend side of things, you have a model class that mimics your client side JavaScript model. Say you want to update a reference inside a model that displays text. I use Scala on the backend, but look at the fields/properties and ignore the syntax.
case class Article (
title: String,// these are my DB fields for an Article.
punchline: String,
content: String,
author: String
);
// now assume the client is making a request and the server returns the JSON
// for an article. So the reply would be something like:
{"title": "Sample title", "punchline": "whatever", "content": "bla bla bla boring", "author": "Charlie Sheen"};
// when you do
var response = JSON.parse(event.target.getResponseText());
// response will become a JavaScript object with the exact same properties.
// again, my backend choice is irrelevant.
// Now assume I am inside the success function, which gets called in the same scope
// as the original object, so it refers TO THE SAME THING.
// the trick is to maintain the reference with var that = this.
// otherwise the onSuccess function will be called in global scope.
// now because it's pointing to the same object.
// I can update whatever I want.
this.title = response.title;
this.punchline = response.punchline;
this.content = response.content;
this.author = response.author;
// or I can put it all in a single variable.
this.data = response;
What you need to remember is that scope needs to be preserved. That's the trick.
When I do var that = this; I copy a reference to the model instance. The reference is remembered through higher-order, not current scope.
Then I tell the XMLHttpRequest object to call that.ajaxSuccess when it is complete. Because I used that, the ajaxSuccess function will be called in the scope of the current object. So inside the ajaxSuccess function, this will point to the original this, the same instance.
JavaScript remembers it for me it when I write var that = this;