How to refresh a view/template in Backbone.js
Solution 1
// Posting message action
postmessage: function (e) {
var optionsp = {
query: uni_id + "/chaid/" + currentChallenge['id']
}
var postmsg = $('#txt').val();
var obj = new PostwallModel(optionsp);
obj.save({
uid: uni_id,
chaid: currentChallenge['id'],
post: postmsg
}, {
success: function (obj, response) {
console.log(response.responseText, console.log(response);
alert(response.message),that.initialize());
}
});
e.preventDefault();
$('#txt').val("");
}
Solution 2
When a backbone operation such as a GET or POST is completed, the model will fire a sync event that you can listen to on the view and call your render function. That code looks something like this and can be placed in your view initialization method:
this.listenTo(this.model, 'sync', this.render);
Sport
I'm a Full-Stack developer working on iOS ,android iPhone ,iPad and game applications.Practice and the love for programming is what defines me.Love to learn new technologies,keen about entrepreneurship and startups.
Updated on June 04, 2022Comments
-
Sport almost 2 years
I am running into an issue. My
CommentinfoModel
is fetching data from the server and I am able to show all the data in a view. I used anotherPostwallModel
to post the data in same view.When I am posting the data, I get a response from the server, but that data does not appear in template. When I go to another page and I come back, the new posted data is appears. How can I refresh after my post action in done. Here is my code:
var myPostwallView = Backbone.View.extend({ el: $("#content"), events: { 'click #postinwall': 'postmessage', }, initialize: function () { var that = this; var options = { query: uni_id + "/chaid/" + currentChallenge['id'] } var onDataHandler = function (collection) { that.render(); } var onErrorHandler = function (collection) { var errorstring = JSON.stringify(collection); console.log(errorstring); } this.model = new CommentinfoModel(options); this.model.fetch({ success: onDataHandler, error: onErrorHandler, dataType: "json" }); }, render: function () { $('.nav li').removeClass('active'); $('.nav li a[href="' + window.location.hash + '"]').parent().addClass('active'); var data = { cinfo: this.model.toJSON(), _: _ }; var compiledTemplate = _.template(PostwallTemplate, { data: data }); this.$el.html(compiledTemplate); }, // Posting message action postmessage: function (e) { var optionsp = { query: uni_id + "/chaid/" + currentChallenge['id'] } var postmsg = $('#txt').val(); var obj = new PostwallModel(optionsp); obj.save({ uid: uni_id, chaid: currentChallenge['id'], post: postmsg }, { success: function (obj, response) { console.log(response.responseText, console.log(response); alert(response.message)); } }); e.preventDefault(); $('#txt').val(""); } }); return myPostwallView;
-
Sport almost 10 yearsi am not getting your point. can you check my code and tell me where i need to change and what i need to add in code . @Griffin
-
Griffin M almost 10 yearsI think you just need to add the above line into your view's 'initialize' function below the 'var that = this' line for instance.
-
Sport almost 10 yearsvar that = this ; already i have added in my code look at my initialize fun.
-
Griffin M almost 10 yearsno I meant to place this line: this.listenTo(this.model, 'sync', this.render); after that var that=this; line