CODEWITHSUNDEEP
ember.js
Rissa
Rissa

Reputation: 201

template not bind a model in Ember

I will try to bind model,controller and template in ember Here is my js

App = Ember.Application.create({});

App.Person = Ember.Object.extend({
    firstName: "r",
    lastName: "issa"
});

App.TestingRoute = Ember.Route.extend({
    model: function () {
        return App.Person.create();
    },
    setupController: function (controller, model) {
        controller.set("model", model);
    }
});

App.TestingController = Ember.ObjectController.extend({
    submitAction: function () {
        alert("My model is :" + this.get("model"));
    }
});

my template is :

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

<script type="text/x-handlebars" data-template-name="testing">

  {{input valueBinding="model.firstName"}}
  {{input valueBinding="model.lastName"}}
    <button {{action submitAction target="controller"}} class="btn btn-success btn-lg">Pseudo Submit</button>
  <p>{{model.firstName}} - {{model.lastName}}</p>

</script>

what s wrong why model not binding in template and alert retunn model is null

Upvotes: 1

Views: 616

Answers (1)

Marcio Junior
Marcio Junior

Reputation: 19128

Your setupController and model methods from TestingRoute aren't being called. Because your controller is created by the render view helper, not by a transition.

For example using the following works:

template

<script type="text/x-handlebars" data-template-name="testing">

  {{input valueBinding="model.firstName"}}
  {{input valueBinding="model.lastName"}}
  <button {{action submitAction target="controller"}} class="btn btn-success btn-lg">Pseudo Submit</button>
  <p>{{model.firstName}} - {{model.lastName}}</p>

</script>

javascript

App = Ember.Application.create({});

App.Router.map(function() {
    this.route('testing', { path: '/' })
});

App.Person = Ember.Object.extend({
    firstName: "r",
    lastName: "issa"
});

App.TestingRoute = Ember.Route.extend({
    model: function () {
        return App.Person.create();
    },
    setupController: function (controller, model) {
        debugger        
        controller.set("model", model);
    }
});

App.TestingController = Ember.ObjectController.extend({
    actions: {
        submitAction: function () {
            alert("My model is :" + this.get("model"));
        }
    }    
});

Here is the fiddle http://jsfiddle.net/marciojunior/8DaE9/

Also, the use of actions in controllers is deprecated in favor of using the actions: { ... } object

Upvotes: 2

Related Questions