Mustache.js render technique - javascript

i am trying to use mustache.js to render some JSON in the browser.
What i want to do is:
<li>
<span class="label">Location: </span>
{{#locations}}
{{.}}<span class="social-small-size "></span>
{{/locations}}
</li>
The locations is a js array
[["Pendéli, Attiki, Greece", "facebook"], ["Greece", "linkedin"]]
Initially i tried to use {{%IMPLICIT-ITERATOR iterator=loc}} in my attempt to split the data in the view. So i the actual rendering code was
{{loc[0]}}<span class="social-small-size {{loc[1}}"></span>
But that did n t work altough the loop worked and i got 2 spans but without any content. I think the PRAGMA is what I need but I didn 't figure it out. Any hints ? :)

The answer is quite simple, do not use arrays in array. You should uses hashes.
The above code should work as
{{#locations}}
{{value}} <span class='social-small-size {{network}}'></span>
{{/locations}}

Related

Cant get a message text to render an emoji rather than the HTML text

I am using a cool little AngularJS filter for emoji characters located at: http://dev.venntro.com/angular-emoji-filter/ and this is my code I have so far.
<p class="chatmessage plain ng-binding" ng-repeat="message in messages track by $index" ng-model="message" ng-bind-html-unsafe="message | emoji">
<b>{{message.Author}}:</b>{{message.Message|emoji}}
</p>
It gives me the following output:
User123: <i class='emoji emoji_smiley'>smiley</i>
obviously, I'd rather have the emoji icon, but that is what gets output to the page. This is almost a win for me even at this stage as I had to figure out how to add all of the appropriate references to get the message filter to work and get this far. Now I am trying to come up with a way to make the "message.Message" render the HTML rather than just giving me the HTML code itself.
I am wondering if there is a function that I can wrap around that to force it to render this emoji rather than the HTML?
Thank you for any help
Sincerely,
New kid to AngularJS
I think you need to try with below ng-repeat code :
<p class="chatmessage plain" ng-repeat="message in messages track by $index">
<b>{{message.Author}}:</b><p ng-bind-html-unsafe="message.Message | emoji"></p>
</p>

Showing only a few elements, others can navigate using the arrows

Good moorning.
I have got a variable $awards = array which contents some data from database from specific users. This variable extracts a set of awards to result set of users.
<div>
<span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
<a href="{$basePath}{$award['link']}">
<img src="{$basePath}{$award['preview']}"/>
</a>
</span>
</div>
However, some users have so much awards -> I would like to show first 4 awards between two arrows allowing going through the other.
Example: arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next
Could you help me how to do it? I know it's solvable through javascript but I dont know javascrip much (beginner). Or - does exist some plugin? Thank you

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>
I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples

AngularJS - Render HTML tags that are contained in a string

My database stores product information, and a lot of this is organised into lists. I load the data into Angular as $scope.post.
For instance,
$scope.post.size_description = '<li> Fits true to size. Take your normal size\r</li>
<li> Slim-cut, mid-rise style</li>
<li> Long in length, alter to fit</li>
<li> Model wears an IT 48\r</li>
<li> Model measures: waist size 32, height 6\'1"/ 185cm\r</li>'.
When I try to load this data into my Angular app, it gets rendered as text (i.e. the <li> are not parsed). I understand this probably happens for security reasons, but is there any way around it?
As Damax has said here: https://stackoverflow.com/a/11640420/769083
<div ng-bind-html-unsafe="post.size_description"></div>
ngBindHtml worked for me. See more in the docs here: https://docs.angularjs.org/api/ng/directive/ngBindHtml
<div ng-bind-html="post.size_description"></div>

change text string on couple website at the same time using jquery

22I am preparing a website which will contain prices of products on couple pages. Sometimes the same products are on couple of pages (e.g. on the main page and the specific product page). What I'm trying to achieve is to have ability of using any sort of spreadsheet or any other type of document (another perhaps) to control prices of all items across the whole website. I believe every price must be indexed somehow so we know that in with id="product1" will be the correct price and different than in id="product2".
Currently I have the example code here:
<h3>Product 1</h3>
<div class="price">
<span id="product1">£55 per day</span>
</div>
<h3>Product 2</h3>
<div class="price">
<span id="product2">£20 per day</span>
</div>
etc...
Sorry for rather a 'question type' topic than the 'case type', but I was trying to find the solution already. I know it can be done in php, but I have no idea about php unfortunately. So anything in html / javascript will be handy. Thnx a lot for any help/advice.
use JSON, not XML It's not 2003. Your jquery would be:
var prices = $.get("prices.json")
var product;
$("h3").each.( function()
{
product = $(this).html();
$(this).next().children("span").html(prices[product]);
});
Assuming you have no other H3's on your pages, otherwise give each product ID 'h3' a class a la:
<h3 class="products">Product 1</h3>
and use $(".products") instead of $("h3").
You could also use a selector to pull the <div>'s by class, and fetch the child <span>'s id.
I would recommend storing the data in either a database or an xml file to be read by the website. That way it's a "change once" situation. However, the scope of what needs to be done is beyond what you'd find in a simple answer here.
Edit: Jquery is a client side language, which means that it will only change what's currently exposed to the client at that time. It does have the ability to read from an xml file, and use that data to populate the display. But that data does need to be stored externally for it to affect more than one page at the same time.

Categories