CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.jsunderscore.js-templating
Sport
Sport

Reputation: 8945

calling oneview to another view in backbone js view is not appearing

i have problem in home view to call new view , when i am calling another view inside the homeview. firstview not rendering . and big problem here that event is working !! but if call the first view then view is not coming.the problem exactly in events and render template??

homeview

define(['jquery', 'underscore', 'backbone', 'views/top/TopbarpageView', 'views/home/firstView', 'text!templates/home/homeTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, TopbarpageView, firstView, homeTemplate) {
    var HomeView = Backbone.View.extend({
        el: $("#page"),
        events: {
            'click button#openEssay': 'openEssay'
        },
        render: function() {
            $('.menu li').removeClass('active');
            $('.menu li a[href="#"]').parent().addClass('active');
            this.$el.html(homeTemplate);
            var topbarpageView = new TopbarpageView();
            topbarpageView.render();
        },
        openEssay: function() {
            console.log("yyyyyyyyyyyyyy");
            var firstView1 = new firstView();
            firstView1.render();
        }
    });
    return HomeView;
});

homeTemplate

<div class="main">
    <div class="container">
        <h5>home page</h5>

        <p><button class='button' id='openEssay'>test</button></p>
    </div>
</div>

Here am getting console (yyyyyy )value .but first view not appearing.

firstview

define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
    var firstView = Backbone.View.extend({
        el: $("#page"),
        template: _.template(firstTemplate),
        events: {
            "touchstart #invitefriend": "invitefriendAction",
        },
        initialize: function() {
            console.log(" came in this view");
            this.render();
        },
        render: function() {
        console.log("firstview");
            this.$el.html(this.template());
        },
        return firstView;
    });

firstTemplate

<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div>

Upvotes: 2

Views: 2854

Answers (3)

Sport
Sport

Reputation: 8945

home view

events: {
            'click #openEssay': 'openEssay'
        },

and 

openEssay: function() {
            console.log("yyyyyyyyyyyyyy");
            var firstView1 = new firstView();
            firstView1.render();

first view 

 define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
        var firstView = Backbone.View.extend({
            el: $("#content"),

            events: {
                "touchstart #invitefriend": "invitefriendAction",
            },
            initialize: function() {
                console.log(" came in this view");
                this.render();
            },
            render: function() {
            console.log("firstview");

var urTemplate = _.template( firstTemplate);
                                               this.$el.html(urTemplate);
                this.$el.html(this.template());
            },
            return firstView;


        });

firstTemplate

<div id ="content">
<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 
</div>

Upvotes: 3

Nurdin
Nurdin

Reputation: 23883

try using append instead html

this.$el.append(this.template());

Upvotes: 0

diurnalist
diurnalist

Reputation: 408

As others have remarked, you have two views binding to the same dom element. Each view will rewrite the entire contents of that dom element on render. So, I think what is probably happening is you ARE rendering the second view, but then the first view is immediately rendering back over top of it in some way. Try setting a breakpoint inside your second view's render method to verify if this is the case.

In general you will have problems if you are binding multiple Views to one element. I would suggest trying to assign each view its own dom container.

Upvotes: 1

Related Questions