CODEWITHSUNDEEP
ember.js
mg2
mg2

Reputation: 83

handlebars view not refreshing when {{#if}} {{else}} condition changes

(edit: simplified things a bit below)

I have a handlebars template with an {{#if etc}} conditional, and when I change the associated data the view updates the first time, but then does not continue to update on subsequent changes. I am toggling a boolean that is in the condition, and I know the toggle is running and switching the property because I can watch it do so on the console, but the actual view, a I said, only refreshes once. In my html file this looks like this:

<script type="text/x-handlebars" data-template-name="application">
<body>
<div class="row">
  {{#if App.Nav.show}}
     {{outlet nav}}
  {{/if}}
  <div class="span10">
     <h1>Hello</h1>
     {{outlet}}
  </div>
</div>
</body>
</script>

and a bit further on, to toggle:

<script type="text/x-handlebars" data-template-name="people">                                                                                                                                                
   <a {{action toggleMenu}}> toggle </a>
</script>

and in the javascript:

App.NavController = Ember.Controller.extend();
App.NavView = Ember.View.extend({
    templateName: 'nav'
});
App.Nav = Ember.Object.create({
    show: true
});

and finally the relevant bits of the router:

App.Router = Ember.Router.extend({
  enableLogging: true,
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
        showPerson: Ember.Route.transitionTo('aName'),
        toggleMenu: function(){
           console.log('Changing the toggle!');
           App.Nav.toggleShow();
        },
        connectOutlets: function(router){
            router.get('applicationController').connectOutlet('nav', 'nav');
            router.get('applicationController').connectOutlet('allPeople', unrelated_function())
        }
    })
   })
});

Upvotes: 1

Views: 1644

Answers (2)

eduard
eduard

Reputation: 1495

I would say to put your if into your view. Something like this:

 <script type="text/x-handlebars" data-template-name="people">
      <a {{action toggleMenu}}> toggle </a>
      {{#if App.Nav.show}}
            <div>navigation</div>
      {{/if}}
      <div class="span10">
           <h1>Hello {{name}}</h1>
      </div>
 </script>

Then your application view should look something like this:

<script type="text/x-handlebars" data-template-name="application">
     <body>
          <div class="row">{{outlet}}</div>
     </body>
</script>

Let me know if you tried it and it worked.

Upvotes: 2

Mudassir Ali
Mudassir Ali

Reputation: 8041

I did not use connectOutlet to display the view, let me know if there is some purpose behind using connectOutlet method, Meanwhile here is my implementation of toggling the view visibility

Upvotes: 1

Related Questions