I am working on a Backbone.js app and sending request to my API for JSON data to be show on the front end with Backbone Template.
The returned JSON has some HTML entities within the JSON array, and the HTML is getting printed as text.
Below is my template code:
{{#each this}}
<li>
<a > </a>
<section class="ip">
<p><% {{title}} %></p>
<h3>
<time class="timeago" datetime="{{pubDate}}"></time>
{{type}}
</h3>
</section>
</li>
{{/each}}
{{#unless this}}
<p>Der er pt ingen sociale opdateringer om denne artist</p>
{{/unless}}
Please help.
I'm not sure what templating engine you're using, but the syntax looks like Handlebars for the most part, so that's what I'm going to assume.
In order to escape HTML entities in Handlebars, you need to use {{{triple mustaches}}}
For example, you have JSON:
{
text: "<p>My paragraph</p>"
}
Your template might look like this:
<div>
{{{text}}}
</div>
And your output:
<div>
<p>My paragraph</p>
</div>
Related
I have an array of comments. For each of the comment, I have a hidden form where you can reply. That item in each object of the array is called: comment.showSubCommentForm. When I click on Reply, I want to be able to reply with a comment and the function called: commentOnSubPost.
I load my data in chunks of 10 (lazy loading) which I am doing by using the infinite-scroll-distance Angular module. Every time I reach the end of the page, I get the next 10 items and add them to the $scope.comments array, which you can see below is what I am running my ng-repeat on .
The problem is that, although the commentOnSubPost works really well as in it adds the reply to the comment, I have reload the data so I can get the updated $scope.comments with the new reply. BUT - as I have implemented lazy loading, how do I do that if say I am on the 20th page?
I looked at some similar posts but their approach from mine was very different so am very lost.
My HTML:
<div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
<div class="row">
<div ng-repeat="comment in comments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="#">SomeLink</a>
<div>
<p >{{ comment.date }} <a ng-href="/wall#/profile/main/{{ comment.userID }}">{{ comment.fullname }}</a> says <i class="commentReply"><a href ng-click="comment.showSubCommentForm = !comment.showSubCommentForm"><small>Reply</small></a></i></p>
<p class="mainComment">
{{ comment.comment }}
<p class="meta"><i class="showReply"><a href ng-click="comment.showReplies = !comment.showReplies"><small>Show Replies</small></a></i></p>
</p>
</div>
<div ng-show="comment.showSubCommentForm">
<form ng-submit="commentOnSubPost( post._id, comment._id, subComment)">
<div class="form-group">
<div class="form-group">
<textarea ng-model="subComment" class="form-control" placeholder="Reply to the above comment"></textarea>
</div>
<input type="submit" value="Reply">
</div>
</form>
<div ng-show="comment.showReplies" ng-repeat="subComment in comment.subComments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="/wall#/profile/main/{{ comment.userID }}"><img ng-src="{{ subComment.profilePic }}" class="avatar" style="border-radius: 50%"></a>
<div class="post-subComments">
<p class="meta">{{ subComment.date }}<a ng-href="SomeLink"> {{ subComment.fullname }}</a></p>
<p>
{{ subComment.comment }}
</p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
I won't add too much information here as I don't want to overload this post but if you need any particular information, please do let me know. I just need to know how do I reload the data (or not if there's another approach) so that I can get the latest data.
I hope this makes sense.
Thanks in advance!
Like you have $scope.comments = []; then on each call you just have to append upcoming data to this array.
Like $scope.comments = $scope.comments.concat(response.data);
In this way lazy loading will work.
I fixed this with making a Node route which gives back the exact comment I have just added. Then, I found that commentID in my $scope.comments and made it's subCommenemts to the one I have locally.
It does the job and the data is real. One drawback is that if at that time, there's another comment, it won't show up until the page's refreshed but I'm not too fussed about that.
I am quite new to Angular, but I have successfully set up a list.html template to show posts in Wordpress using V2 of the WP API.
Now, I would like to show some (ACF) fields from another page above my post list. I have the ACF API plugin installed as well, and it does work for posts.
I just have no idea how to refer to the right page ID, or if I need to set up another controller for this.
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
As you can see ":2" probably makes no sense, but I could not find any reference on how to do this properly.
Thanks in advance for any help!
btw. this is the full code from my list.html template/partial:
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
<div class="post-list">
<article ng-repeat="post in posts | orderBy:'date'" class="col-md-2">
<div>
<div class="date-wrap">
<h6 class="event-date">{{post.title.rendered}}</h6>
</div>
<!-- <div ng-bind-html="post.content.rendered | to_trusted"></div> -->
<div ng-if="post.acf.event_title">
<div class="post-data-container">
<p>{{post.acf.event_title}}</p>
<p ng-if="post.acf.conversation_with">A conversation with {{post.acf.conversation_with}}</p>
<p>{{post.acf.about_or_by}} {{post.acf.lecture_from}} </p>
</div>
<img ng-src="{{post.acf.portrait.sizes.thumbnail}}" />
</div>
<div ng-if="!post.acf.event_title">No Event Title</div>
<a ui-sref="detail({id: post.id})">Click here to read more</a>
</div>
</article>
</div>
Are you grabbing the ACF data from the OTHER post? Is it part of your JSON object that returns to the view? If it is, you would just point to that. To verify it is, go to yourdomain.com/posts/:id where id is the post you are viewing, and see if the OTHER post's ACF data is present.
If not you'll need to create a controller or another function which hits the API again for that other post's data, so $scope.other_post = getPost({id:OtherPostID});
make sense?
I am getting HTML data from the database and the data is like --
"<span class=\"ui-like \" data-tipcontent=\"initialmessage\" data-contentid=\"4f3f9827-364a-41b8-adf4-a5c4ada64b8d\" data-contenttypeid=\"f7d226ab-d59f-475c-9d22-4a79e3f0ec07\" data-initialcount=\"5\" data-initialstate=\"true\" data-readonly=\"false\" data-initialmessage=\"You and <span class="who-likes">4 others</span> like this\" data-format=\"{message}\" data-configuration=\"Format=%7Bmessage%7D\"></span>
I am using <div ng-bind-html="connection.LikeCountMessage"></div> to render this html, but it is not rendering the entire HTML. It is just rendering
<div ng-bind-html="connection.LikeCountMessage" class="ng-binding">
<span class="ui-like "></span>
</div>
I am expecting something like
<div ng-bind-html="connection.LikeCountMessage" class="ng-binding">
<span class="ui-like ">You and 4 other like this</span>
</div>
How do i fix this? what am I missing?
use ng-bind-html-unsafe instead of ng-bind-html
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.
I'm stuck in the position where I have to work with some pre-generated html elements. For example I have a list like this
<ul>
<li class="product>
<div class="name">product 1</div>
<div class="price">$199</div>
</li>
<li class="product>
<div class="name">product 2</div>
<div class="price">$299</div>
</li>
</ul>
Since the AngularJs has been talking all about dynamically generated content via js, I wonder if there is a way that I can loop through the pre-generated html elements to initialize the models?