how can i update the template view or json data so that i could re-render my template view in backbone.js - backbone.js

Question

i want to update the view, as i click on follow button, id for follow button is btn-follow.
i want to update the ui if template, that i when i click on follow button, if value in console data is true follow button should change in "FOLLOW" if value in console is false then button caption should be UN-FOLLOW. how can i update the view or how can i update the joson data and re-render the template.
my view code is here.
spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {
// Load template
var pforumTemplateHtml = App.renderTemplate("pforumTemplate", {}, "communityModule/tabContainer/pforum");
// Define view(s)
communityApp.Views.pforumView = Marionette.ItemView.extend({
template: Handlebars.compile($(pforumTemplateHtml).html()),
tagName: "li",
onRender: function () {
this.object = this.model.toJSON();
},
events: {
"click .btn-comment" : "showComments",
"click #recent-btn": "recent",
"click #my-posts": "myposts",
"click #popular-btn": "popular",
"click #follow-btn": "follow",
"click #my-posts": "LeftLinks",
"click #popular-btn": "LeftLinks",
"click .btn-follow": "activityBtn",
"click #like-btn" : "activityBtn",
"click #post-comments-btn": "showCommentEiditor"
},
postcomments : function ()
{
$("#recent-post-main-container").hide();
$("#recent-post-main-container2").show();
},
showCommentEiditor : function (){
$(".comment-popup-container").show();
$(".comment-txt-area").val('');
},
showPforumTab : function ()
{
$("#recent-post-main-container2").show();
$("#recent-post-main-container").hide();
},
showComments : function(){
$("#loading").show();
$(".tab-pane").hide();
$(".left-content").hide();
$("#recent-post-main-container2").show();
$(".left-content-commentEditor").show();
//$(".comm-tab-content-container").css('height','200px');
$(".comment-txt-area").val('');
$(".left-content-comment").show();
},
hideCommentPopup : function ()
{
$("#public-question-comment").hide();
},
// Show Loading sign
showLoading : function () {
$('#loading').show();
},
// UnLoading Function
hideLoading : function (){
$('#loading').hide();
},
// Add New Event Function
addEvent : function()
{
//$("#name").val(getBackResponse.user.FullName);
//$("#phone").val(getBackResponse.user.CellPhone);
//$("#email").val(getBackResponse.user.UserName);
$(".overly.addevent").show();
$('#lang').val(lat);
$('#long').val(long);
document.getElementById("my-gllpMap").style.width = "100%";
var my_gllpMap = document.getElementById("my-gllpMap");
google.maps.event.trigger( my_gllpMap, "resize" );
},
setValues : function(key,value)
{
window.localStorage.setItem(key,value);
},
getValues : function (key)
{
return window.localStorage.getItem(key);
},
closeAddEvent:function ()
{
$(".overly.addevent").hide();
},
// Show Over lay
showOverly:function ()
{
$('.overly-right-tab').show();
},
// Hide Loading sign
hideOverly : function()
{
$('.overly-right-tab').hide();
},
enlargeImage : function ()
{
$('#image').css('width','212px');
$('#image').css('height','150px');
},
activityBtn: function (e) {
var elem = $(e.target);
if (elem.hasClass('inactive')) {
return false;
}
var activity = elem.attr('name');
switch (activity) {
case "like-Button":
var _this = $.extend({},this,true);
_this.activity = 'like-Button';
this.activityBtnSubmit.call(_this);
break;
//
case "follow-button":
var _this = $.extend({},this,true);
_this.activity = 'follow-button';
this.activityBtnSubmit.call(_this);
break;
}
},
//For Like Post
activityBtnSubmit: function (modalThis) {
// var o = (this.parentThis) ? this.parentThis.object : this.object;
//var o = "52fa2ccc9bca9ac90c000051";
var func = _.bind(function () {
//var hmObj = new MessageApp.Controllers.hmAlertsController();
//hmObj.init();
}, this);
switch (this.activity) {
case "like-Button":
App.ids = null;
App.ids2 = null;
App.ids = this.object.id;
App.ids2 = this.object.iLiked;
if(App.ids2 === true) {
App.action = 0;
}
else if(App.ids2 === false) {
App.action = 1;
}
var data = {
id: this.object.id,
iLiked:App.action,
sessionToken:loginUser.sessionToken,
};
$.when(App.request('alertActivity:entities', {
origin: 'pforum',
id: this.object.id,
iLiked:(App.action),
sessionToken:loginUser.sessionToken,
//value : value,
dataToSend: JSON.stringify(data),
activity:this.activity,
}))
.then(func);
App.ids1 = (data.id);
break;
case "follow-button":
App.ids = null;
App.ids2 = null;
App.ids = this.object.UserId;
App.ids2 = this.object.iFollow;
if(App.ids2 === true) {
// $(".btn-follow").html("UN-FOLLOW");
App.action = 0;
}
else if(App.ids2 === false) {
//$(".btn-follow").html("FOLLOW");
App.action = 1;
}
if (App.ids) {
alert (App.ids);
$(".btn-follow").html("UN-FOLLOW");
//App.action = 0;
}
else
{
$(".btn-follow").html("FOLLOW");
//App.action = 1;
}
var data = {
id: this.object.UserId,
iFollow:App.action,
sessionToken:loginUser.sessionToken,
};
$.when(App.request('alertActivity:entities', {
origin: 'pforum',
id: this.object.UserId,
iFollow:(App.action),
sessionToken:loginUser.sessionToken,
//value : value,
dataToSend: JSON.stringify(data),
activity:this.activity,
}))
.then(func);
App.ids1 = (data.UserId);
break;
}
return true;
}
});
var RowView = Backbone.View.extend({
events: {
"click .btn-follow": function() {console.log(this.model.get("name"));}
},
initialize: function(){
this.model.on('change', this.render, this);
},
render: function() {
var html=_.template(rowTemplate,this.model.toJSON());
this.setElement( $(html) );
return this;
},
});
// define collection views to hold many communityAppView:
communityApp.CollectionViews.pforumCollectionViews = Marionette.CollectionView.extend({
tagName: "ul",
itemView: communityApp.Views.pforumView
});
});
my template code is here.
<div>
<div class="comm-tab-row">
<div class="post-left-panel">
<div class="post-image-container">
<img src="{{UserImageURL}}" alt="" class="post-image" /></br>
{{#if iLiked}}
<img src="images/myCommunity/liked#2x.png" width="20" height="19" id="like-btn" name = "like-Button" >
{{else}}
<img src="images/myCommunity/like#2x.png" width="20" height="19" id="like-btn" name = "like-Button" >
{{/if}}
({{NumLikes}})
</div>
</div>
<div class="post-body">
<h5 class="comm-tab-heading">
<span class="navigate-screen" id="{{Id}}" style="text-decoration:underline;">
{{UserName}}
</span>
<span>
-
</span>
<span>
{{format_date Time ""}}
</span>
</h5>
{{Message}}
</div>
<div class="comm-right-panel">
{{#if iFollow}}
UN-FOLLOW
{{else}}
FOLLOW
{{/if}}
{{NumComments}} - COMMENT
</div>
</div>

Answer 1

You can add a new boolean to the model of your view isFollowing. You can then add a condition inside your template to determine which button to render.
<% if(isFollowing){ %>
<button> Unfollow </button>
<% } else { %>
<button> Follow</button>
<% } %>
To rerender the view call the render function from your event handler.
events: {
"click .btn-follow": function() {
//Do comething useful..
this.render();
}
},