CODEWITHSUNDEEP
ember.js
niran
niran

Reputation: 1980

ValueBinding issues in EmberJS?

I am facing issue in getting updated value in the view. I think valueBinding is not working

 <script type="text/x-handlebars" >
            {{#view App.Test }}
                <label>Name:</label>
                {{view Ember.TextField  placeholder="username" valueBinding="view.name"}} </br>  </br>
              {{/view}}
      </script>

App.Test = Ember.View.extend({

    name: null,

     submit: function(event) {
       // event.preventDefault();
       console.log(this.get('name'));

    }

})

When submit function called, console.log(this.get('name')); allways shows NULL value, even though value is typed in the textfiled.

Upvotes: 1

Views: 727

Answers (1)

Mudassir Ali
Mudassir Ali

Reputation: 8041

As you are already inside the block helper you don't need to bind using "view.name" ,

But in cases where the application is intialized by router & the views are connected to the outlets you might need to use "view.name" to refer to the properties inside the view, For example

Basic App Setup

MyApp = Ember.Application.create();

MyApp.Router = Ember.Router.extend({
  root: Ember.Route.create({
    index: Ember.Route.create({
      route: '/',
      redirectsTo: 'home',
      home: Ember.Route.create({
        route: '/home',
        connectOutlets: function(router){
          router.get('applicationController').connectOutlet('home');
        }
      })
    })
  })
});

MyApp.ApplicationView = Ember.View.extend({
  templateName: 'application'
})

MyApp.HomeView = Ember.View.extend({
  templateName: 'home',
  name: 'TheName'
})

MyApp.HomeController = Ember.Controller.extend({
  name: "Joey"
})

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

<script type="text/x-handlebars" data-template-name="home">
  {{view.name}} I am from Home View
  {{name}} I am from the Home Controller
</script>

As you can see, in this case when you do {{name}} it looks for the property in controller & if you want to use the property from the view you need to use {{view.name}}

Fiddle

Upvotes: 2

Related Questions