codingdir logo sitemap sitemap |
Home
PHP
C#
C++
ANDROID
JAVA
JAVASCRIPT
PYTHON

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


By : , Category : backbone.js

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();
    }
 },
ReLated :

The usual pattern in render looks like this:

render: function() {
    this.$el.append(this.template(...));
    return this;
}

but you could replace the usual append call with a setElement call to replace the view's el with one of your own:

render: function() {
    this.setElement(this.template(...));
    return this;
}

Demo: http://jsfiddle.net/ambiguous/t977y/

You'll still have a <div> created in this.el before your setElement call but that probably doesn't matter that much.

var compiled = _.template($("#loginned-top-bar-template").html());
var templateVars = {user_name : 'awesome_user' };
$('#top-bar').html( compiled(templateVars) );

<%user_name%> should be <%=user_name%> if you want to print the variable.

If you want to use other user_name, set user_name property before compiled function called.

var compiled = _.template($("#loginned-top-bar-template").html());
var templateVars = {user_name : 'awesome_user' };
templateVars.user_name = Parse.User.current().get("name");
$('#top-bar').html( compiled(templateVars) );

I would probably do something like this to start with:

var WeatherItemView = Backbone.View.extend({
  template: _.template($('#weather-template').html()),
  render: function () {
    var content = this.template({
      weather: this.model
    });

    this.$el.html(content);
    return this;
  }
});

var WeatherListView = Backbone.View.extend({
  initialize: function () {
    this.listenTo(this.collection, 'sync', this.render);
  },
  render: function () {
    this.collection.each(function (weather) {
      var subView = new WeatherItemView({
        model: weather
      });
      this.$el.append(subView.render().$el);
    }, this);

    return this;
  }
});

$(document).ready(function () {
  var weathers = new WeatherCollection();
  weathers.fetch(); // assuming its accessing an api endpoint.

  var weathersView = new WeatherListView({
    collection: weathers
  });
  $('body').html(weathers.render().$el);
});

<!-- template for one weather item view -->
<script id='weather-template' type="text/template">
  <%= weather.escape('name') %>
</script>

$("#pagination-centered") will look for that selector in the current window dom. This means that if the content of your template (where the pagination-centered element is defined) is not in the dom, it won't be find (yelding to a null el and nothing being rendered).

I think there are clearer way to achieve good templating in Backbone, but what would be quick and easy in your case is to create the views as

var Home = Backbone.View.extend({
    tagName: "section",
    render: function() {
        this.$el.html( /* load the content of your home template here */);
        var list = this.$('#pagination-centered')
        for ( ... ) // here you loop over your models
            list.append(singlePost.render().el);
        return this;
}

var SinglePost = Backbone.View.extend({
    tagName: "li",
    render: function() {
        this.$el.html( /* load the content of your single post template here */);
        return this;
    }
}

One of the common pitfalls in Backbone Views is that each view has an implicit element that wraps everything that gets rendered. In this case for example your Home template will be rendered within a section. What you tried to do (assigning the el property to a certain dom selector) while tecnically possible, is not the common or suggested way to achieve that.

Another suggestion is to try to have meaningful and semantically correct markup. If pagination-centered is a list, it should be a ul or ol, not a div.

Comments


Message :
Login to Add Your Comments .
How to disable registered OpenCL platforms on Windows?
Is Observable broken in Angular 2 Beta 3?
Cross-thread operation not valid when using Invoke
How to pass an IEnumerable or queryable list of properties from Controller to View
Finding numbers after a certain keyword using Python
Pocketsphinx recognizes random phrases in a silence
Passing non-thread-safe objects through thread-safe containers
React scroll nav
BizTalk WCF-BasicHttp Adapter does not allow Empty string for Service Certificate Props
Why property ''cause" of Exception is repeating forever?
Privacy Policy 2017 © codingdir.com All Rights Reserved .