how can i update the template view or json data so that i could re-render my template view in backbone.js -
i want update view, click on follow button, id follow button btn-follow. want update ui if template, when click on follow button, if value in console data true follow button should change in "follow" if value in console false button caption should un-follow. how can update view or how can update joson data , re-render template.
my view code 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 on 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 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 hold many communityappview: communityapp.collectionviews.pforumcollectionviews = marionette.collectionview.extend({ tagname: "ul", itemview: communityapp.views.pforumview }); }); my template code 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}} <a href="javascript:void(0);" class="btn-follow" name = "follow-button">un-follow</a> {{else}} <a href="javascript:void(0);" class="btn-follow" name = "follow-button">follow</a> {{/if}} <a href="javascript:void(0);" class="btn-comment" name = "comment-button">{{numcomments}} - comment</a> </div> </div>
you can add new boolean model of view isfollowing. can add condition inside template determine button render.
<% if(isfollowing){ %> <button> unfollow </button> <% } else { %> <button> follow</button> <% } %> to rerender view call render function event handler.
events: { "click .btn-follow": function() { //do comething useful.. this.render(); } }, 
Comments
Post a Comment