logo
down
shadow

Is ember (Ember data) ready for productive use?


Is ember (Ember data) ready for productive use?

Content Index :

Is ember (Ember data) ready for productive use?
Tag : backbone.js , By : user87225
Date : November 28 2020, 01:01 AM


Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How about a walk through of the lifecycle of ember/ember-data objects. Or tips/hints for debugging Ember.js and Ember-Da


Tag : javascript , By : user113409
Date : March 29 2020, 07:55 AM
With these it helps First, is that you will want to use the debug version of ember, not the minified production version. This will give you better ember information in the console.
Secondly, the thing that has been greatly helpful for me, is to add in debugging within all my events in my routes, views, and controllers.
window.App = Ember.Application.create({

    debugMode: false,

    log: function(message, location, data) {
      if (this.debugMode) {
        if (data != null) {
          if (typeof data === 'object') {
            data = Ember.inspect(data);
          }
          console.log('DEBUG: ' + this.appName + ' : ' + location + ' : ' + message);
          return console.log('DEBUG: ' + this.appName + ' : (continued) data: ' + data);
        } else {
          return console.log('DEBUG: ' + this.appName + ' : ' + location + ' : ' + message);
        }
    }
}
App.ProfileController = Ember.ObjectController.extend({

  setProfile: function() {
    App.log("setting current user's profile", 'App.ProfileController.setProfile', App.currentUser);
  //do other stuff with the profile
  }
})
App.EventController = Ember.ObjectController.extend({
  init: function() {
    this._super();
    App.log('initializing event controller', 'App.EventController.init');
    return this.set('isLoading', false);
  }
})
DEBUG: My App Name : App.ApplicationController : application controller initializing
DEBUG: My App Name : App.ApplicationRoute.setupController : setupController called
DEBUG: My App Name : (continued) data: {target: <App.Router:ember249>, namespace: App, container: [object Object], _debugContainerKey: 
DEBUG: My App Name : App.accountController.setCurrentUser : setting applications currentUser object
DEBUG: My App Name : (continued) data: {"id":3,"username":"bob","firstName":"Bob","lastName":"W","updatedAt":"2013-04-16T06:29:39.731Z"}
DEBUG: My App Name : App.EventController.init : initializing event controller
DEBUG: My App Name : App.EventRoute.setupController : setupController called
DEBUG: My App Name : (continued) data: {target: <App.Router:ember249>, namespace: App, container: [object Object], _debugContainerKey: controller:event, _childContainers: [object Object], isLoading: false} 
debugger;
{{debugger}}
Ember.inspect(YOUR_OBJECT);

Ember-table integration with Ember-model / Ember-data


Tag : ember.js , By : Pip
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Here's a JSBin that I got working with Ember Data and the RESTAdapter: http://jsbin.com/eVOgUrE/3/edit
It works very similarly to the AJAX loading example, but uses Ember Data to load the data. I created a RowProxy object that is returned immediately to the Ember Table so that it can render a row. After Ember Data loads a page full of data it sets the object property on the RowProxy which updates the view.
window.App = Ember.Application.create();

// The main model that will be loaded into Ember Table 
App.Gallery = DS.Model.extend({
  name: DS.attr('string'),
  smallUrl: DS.attr('string')
});

// This is a temporary buffer object that sits between
// Ember Table and the model object (Gallery, in this case).
App.RowProxy = Ember.Object.extend({
  object:null,
  getObjectProperty : function(prop){
    var obj = this.get('object');
    if(obj){ console.log(prop + " : " + obj.get(prop)); }
    return obj ? obj.get(prop) : 'loading...';
  },
  isLoaded : function(){ return !!this.get('object'); }.property('object'),
  name : function(){ return this.getObjectProperty('name'); }.property('object.name'),
  id : function(){ return this.getObjectProperty('id'); }.property('object.id'),
  smallUrl : function(){ return this.getObjectProperty('smallUrl'); }.property('object.smallUrl')
});

App.ApplicationController = Ember.Controller.extend({
  tableController: Ember.computed(function() {
    return Ember.get('App.TableAjaxExample.TableController').create({
      // We need to pass in the store so that the table can use it
      store : this.get('store')
    });
  })
});

App.TableAjaxExample = Ember.Namespace.create();

App.TableAjaxExample.ImageTableCell = Ember.Table.TableCell.extend({
  templateName: 'img-table-cell',
  classNames: 'img-table-cell'
});

App.TableAjaxExample.LazyDataSource = Ember.ArrayProxy.extend({
  requestPage : function(page){
    var content, end, start, url, _i, _results,
      _this = this;

    content = this.get('content');
    start = (page - 1) * 3;
    end = start + 3;

    // Find galleries and then update the RowProxy to hold a gallery as 'object'
    this.get('store').find('gallery',{page_size:3,page:page}).then(function(galleries){
      return galleries.forEach(function(gallery, index) {    
        var position = start + index;
        content[position].set('object',gallery);
      });  
    });

    // Fill the 'content' array with RowProxy objects
    // Taken from the 'requestGithubEvent' method of the original example
    return (function() {
      _results = [];
      for (var _i = start; start <= end ? _i < end : _i > end; start <= end ? _i++ : _i--){ _results.push(_i); }
      return _results;
    }).apply(this).forEach(function(index) {
      return content[index] = App.RowProxy.create({
        index: index
      });
    });
  },

  objectAt: function(index) {
    var content, row;
    content = this.get('content');
    row = content[index];
    if (row && !row.get('error')) {
      return row;
    }
    this.requestPage(Math.floor(index / 3 + 1));
    return content[index];
  }
});

App.TableAjaxExample.TableController = Ember.Table.TableController.extend({
  hasHeader: true,
  hasFooter: false,
  numFixedColumns: 0,
  numRows: 19,
  rowHeight: 35,
  columns: Ember.computed(function() {
    var avatar, columnNames, columns;

    avatar = Ember.Table.ColumnDefinition.create({
      columnWidth: 80,
      headerCellName: 'smallUrl',
      tableCellViewClass: 'App.TableAjaxExample.ImageTableCell',
      contentPath: 'smallUrl'
    });
    columnNames = ['id', 'name'];
    columns = columnNames.map(function(key, index) {
      return Ember.Table.ColumnDefinition.create({
        columnWidth: 150,
        headerCellName: key.w(),
        contentPath: key
      });
    });
    columns.unshift(avatar);
    return columns;
  }).property(),
  content: Ember.computed(function() {
    return App.TableAjaxExample.LazyDataSource.create({
      content: new Array(this.get('numRows')),
      store : this.get('store')
    });
  }).property('numRows')
});


App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: 'http://files.cloudhdr.com/api/v1/public',
  // This is here to use underscores in API params
  pathForType: function(type) {
    var underscored = Ember.String.underscore(type);
    return Ember.String.pluralize(underscored);
  }
});

// Everything below is all here to use underscores in API params.
// You may or may not need this.

DS.RESTSerializer.reopen({
  modelTypeFromRoot: function(root) {
    console.log("modelTypeFromRoot " + root);
    var camelized = Ember.String.camelize(root);
    return Ember.String.singularize(camelized);
  }
});

App.ApplicationSerializer = DS.RESTSerializer.extend({
  normalize: function(type, hash, property) {
    var normalized = {}, normalizedProp;

    for (var prop in hash) {
      if (prop.substr(-3) === '_id') {
        // belongsTo relationships
        normalizedProp = prop.slice(0, -3);
      } else if (prop.substr(-4) === '_ids') {
        // hasMany relationship
        normalizedProp = Ember.String.pluralize(prop.slice(0, -4));
      } else {
        // regualarAttribute
        normalizedProp = prop;
      }

      normalizedProp = Ember.String.camelize(normalizedProp);
      normalized[normalizedProp] = hash[prop];
    }

    return this._super(type, normalized, property);
  }
});

ember.js - ember-cli: ember-data not available on child view


Tag : ember.js , By : Brazen
Date : March 29 2020, 07:55 AM
this will help After browsing the Ember.js forum I got the answer there - http://discuss.emberjs.com/t/strange-behavior-w-retrieving-model-from-controller/6155
It seems when using the Ember generate controller command, you end up with Ember.Controller, not Ember.ObjectController or Ember.ArrayController lol.
export default Ember.Controller.extend({
});
export default Ember.ObjectController.extend({
});

How do I find the most recently released version of Ember-Data, Ember-CLI, and Ember.js?


Tag : ember.js , By : Jorge Palacio
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Ember, ember-cli, and ember-data all keep their releases in sync. You can check what the latest release is in your terminal by using npm-view
npm view ember-cli version
npm view ember-data version

Ember JS Deprecation Error Since Upgrading to Ember 1.13.2 and Ember Data 1.13.3


Tag : ember.js , By : Ike
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
shadow
Privacy Policy - Terms - Contact Us © scrbit.com