I'm using Mustache in combination with Jquery Mobile and I'm looking for a way to pass information from my template into different views here's an example of my code
var ppl={"ppl":[
{"title":"Man","description":"Vice President"},
{"title":"Man2","description":"Vice President"},
{"title":"Man3","description":"Vice President"}
]};
My template first outputs the all the titles inside of a link
{{ppl}}
{{title}}
{{/ppl}}
What I would like to do is when the user clicks the link they are shown the title and description of the individual person. I've been appending data attributes to the anchor tag but I'm wondering if there's an elegant way of doing this using mustache?
If I understand correctly what you are trying to do: when the user clicks on a person link, some JavaScript code (jQuery) will display a modal window that will show the title and the individual description of the person. This jQuery code has to fetch the individual description from the server, most likely using an AJAX call.
With this in mind:
Templates are not designed to contain logic or pass state. That makes the code hard to follow and maintain.
To pass state between views use:
if the views are implemented using JavaScript use JavaScript variables, parameters in function calls, events whatever.
if the views are implemented on the server side and you need to pass state across request you can use: the session if your state is simple and small, a DB column for more complicated state.
In your case, It seems to me, the server should be able to get the person's title when it fetches the individual person's description and to return one JSON object that contains both the the person's title and person's description so that the client can easily display it.
Hope this help.
Related
For example the webpage : www.test.com/a123 has a var called Value that stores quantity of products
the webpage www.test.com/b123 has the same variable also.
On the console of each page, I can call the variable and get their values, but there is some way to get this values without being on that specific page?
I need to get the value table from this pages having only to specify which page I would like.
Something like :
document.getElementByClassName('tamanho__item_pdpjs-tamanho__item_pdp')[5]
But for variables referencing from which page to get
Use the localStorage property of JS.
localStorage.setItem("a123", "value");
// Retrieve on b123 page
document.getElementById("result").innerHTML = localStorage.getItem("a123");
It sounds like you might be struggling to understand where state should live in your application.
The example you mentioned in the comments, Nike and the "SKUsSizes" is likely getting that data from a backend API. Not by accessing a variable on another "web page".
This would be easier to explain if you had a more concrete example but say you need the page b123 to know how many products there are for a123.
The b123 page would make an HTTP request to your backend API requesting details about a123 which may include the number of products.
This data would be stored in a database.
On the other hand, if the product count is coming from some user action that happens over on a123 and you want to see that state change on page b123 then using local storage as suggested in another answer might be one way to solve that problem.
Although it's probably a better idea to use a framework like React, Vue or Angular and use the state management options they have instead of trying to figure out how to do this from scratch.
Ok, this sounds crazy, but let me explain. I want a user to be able to push a button, and then the html file is edited in such a way that it a NEW p element is created, and stays there PERMENENTLY (eg on reload and for EVERYONE to see). Any way on how I could do that.
Again I am using node.js/express, and html/js/css.
It really depends upon exactly what you're doing.
Conceptually, you would probably use some sort of template system for generating your HTML files (like Jade, Dust, EJS, Handlebars, Nunjucks, PUG, etc..) and then you store some state in a database and use a query from the database as input to the template whenever you render a particular page.
So, when you add an item to the database, it will show up in all future renders of the page.
So, your button would trigger a form post to your server which would add an item to the database and the response from the form post would be a rendering of the page after adding the item to the database. All future renders of the page from all users would also show those same items in the rendered page.
In my MVC site I am displaying data from my model in a table in the view. On the first column (which is a unique number within the model data) I have made it into a click-able link that displays an alert box using jQuery.
What I would like to do is when the link is clicked it queries the model for another piece of data using this unique number and displays that in the alert.
Would someone be able to help me with the query I would need to write?
What you are looking for is Backbone.js
http://backbonejs.org/
What you describe is a perfect example of a collection of models, by clicking on one of them you want to fetch the full model from the server.
With Backbone.js this is easy made and whats even better, you can easy save changed date without writing complex code to do it.
var Model = new Backbone.Model.extend({
url: 'www.call-this.com/to-fetch-from-server/1'
}).
//gets the data from the api
Model.fetch()
//sends data to the same defined api via post
Model.save()
You might have great fun with Backbone ;)
I have a SPA webapp that calls a webservice to gather 'X' amount of json objects ~(1 - 30+). I then use this data for multiple changing slides (all data is not displayed in the 1st slide).
I am using Node/Express/Angular/Jade.
How should I stage these slides when I gather the original data from the webservice (can only call the service once because $ constraints)? I would like the back button/urls to work as well. So, should I completely render out the data and use client side JS to hide/show the dom elements based on button clicks (incorporating messy hash bangs and JS methods to track location/flow). Or is there a sexier more efficient way? Should I store my data in the cache and pull from it (using my angularjs ng-view, note: changing my ng-view will be a pain... it would be ideal to have a ng-view within a ng-view in this particular situation, even though that doesnt exist) based on the slide? Or is there another way?
Thank you for your help, let me know if you need further explanation.
For mapping URLs to your angularjs pages, I would suggest using ui-router. You may or may not need ui-router for this particular problem. But, generally, it will help tremendously in organizing the structure of your site.
For the other questions:
I would store your results (which was retrieved from the service) in a $rootScope variable. The page index of your slides will be a parameter in your URL. Based on the value of this parameter, your controller can decide which page content it will display.
I am building a webapp and have a few arrays that I would like to pass through the URL in order to make the results of my application easily sharable.
Is there an efficient way to do this? I know a lot of websites (like youtube) use some sort of encoding to make their URLs shorter, would that be an option here?
Thanks in advance!
What I suspect you're asking is you have some page where the user can alter information, etc, and you want a way to create a URL on the fly with that information so it can easily be accessed again. I've listed two approaches here:
Use the query string. On your page you can have a button saying "save" that produces a URL with info about what the user did. For example, if I have a webpage where all I do is put my name in and select a color, I can encode that as http://my-website.com/page?name=John_Doe&color=red. Then, if I visit that link, your page could access the query object in JavaScript and load a page with the name and color field already set.
An approach for the "YouTube-style" URLs would be to create a hash of the relevant information corresponding to the page. For example, if I were creating a service for users to store plaintext files. These files are to have the following attributes: title, date, name, and body. We can create a hash of the string hash_string = someHashFunction(title+date+name).
Of course, this is a very naive hashing scheme, but something like this may be what you are looking for. Following this, your URL would be something like http://my-website.com/hash_string. The key here is not only creating these URLs, but having a means to route requests on the server side to the page corresponding to the hash_string.