CODEWITHSUNDEEP
ember.js
user2414728
user2414728

Reputation: 17

Basic emberjs app not working

I'm newbie in emberjs app development. And I want to use emberjs for prototype "transaction page" for my project.

The core idea is simple. I have a list of transactions, which i want to show for user.

I done simple skeleton of my page on emberjs, but it's not working correctly. It's here - http://jsbin.com/udinar/1/edit

TransitionTo in router i used specially, because i want to add some functional section on page in future.

And I will be grateful for comments on the improvement of my code, because maybe I do not fully understand all the concepts emberjs.

Thanks.

Upvotes: 0

Views: 154

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

Here is you working jsbin.

There where some naming conventions problems, the most problematic part was the transactions_list it was not interpreted correctly and thus not working. I've renamed everything to simple transactions. Also, you did try to call create on the controller that get's automatically instantiated, this is changed to extend, and therefore you did try to use the still not instantiated controller in the routes setupController hook, etc. I've also added a button so you can test your controller's addTransaction function.

Here is the code that works:

/**************************
* Application
**************************/

App = Em.Application.create({
  ready: function () {
    alert("App was loaded successfully");
  },
  LOG_TRANSITIONS: true,
  rootElement: '#center'
});

/**************************
* Routes
**************************/

App.Router.map(function() {
  this.route("index", {path : "/"});
  this.route("transactions", {path : "/transactions"});
});

App.IndexRoute = Em.Route.extend({
  redirect: function() {
    this.transitionTo("transactions");
  }
});

App.TransactionsRoute = Em.Route.extend({
  model: function () {
    return [App.Transaction.create({id : 1,
         general_status: 'Done',
         user1_status: 'Done',
         user2_status: 'Done'
      }),
      App.Transaction.create({id : 2,
         general_status: 'In progress',
         user1_status: 'Waiting confirm',
         user2_status: 'Done'
      })
    ];
   }
});

/**************************
* Models
**************************/

App.Transaction = Em.Object.extend({
  id: null,
  general_status: null,
  user1_status: null,
  user2_status: null,
  details: null
});

/**************************
* Views
**************************/

App.TransactionsView = Em.View.extend({
  templateName: 'transactions'
});

/**************************
* Controllers
**************************/

App.TransactionsController = Em.ArrayController.extend({
  addTransaction: function(transaction) {
    console.log(transaction);
    //this.pushObject(transaction);
  }
});

Edit: after your comment, to dynamically retrive your model via ajax you should do:

App.TransactionsRoute = Em.Route.extend({
  model: function () {
    return App.Transaction.find();
  }
});

And then in your controller implement your CRUD methods

App.TransactionsController = Em.ArrayController.extend({
  add: function(transaction) {
    //your implementation
  },
  delete: function(transaction) {
    //your implementation
  },
  edit: function(transaction) {
    //your implementation
  }
});

EDIT

Here is your new working jsbin. I've added ember-data and defined a store, the store only exists using ember-data. I've also defined the Fixtures for the transactions so you will have a place to retrieve from, if your data comes from an API you should switch to the RESTAdapter.

Hope it helps

Upvotes: 1

Related Questions