Why the names of data attributes transformed into lowser case

[simongong]

I wonder when the data is passed on from server to front, why the name of data attributes are set to lower case. Could you please share the consideration for doing it that way? Thank you very much.

[saponifi3d]

It depends on how you are passing these data-attributes.. if you're setting them in HTML it's because HTML is case insensitive as a language, generally it's bad practice to rely on HTML saving the correct case.

If you're setting something on a model or app and it's not saving the case correctly, can you please provide an example of the code you're running and I can try digging into it for ya?

[simongong]

Hi @saponifi3d , thank you for your reply.

I mean data passed from controller to view, via callback().

Here is an example:

• sample_controller.js

var User = require('../models/user');
var Users = require('../collections/users');

module.exports = {
  index: function(params, callback) {
    var adminUser = new User({login: 'admin', created: new Date()}, {app: this.app});
    adminUser.nonModelProperty = 'AAAA';
    adminUser.set('modelProperty', 'BBBB');

    var secondUsers = new Users();
    secondUsers.add(new User({login: '2nd_user_a', created: new Date()}, {app: this.app}));
    secondUsers.add(new User({login: '2nd_user_b', created: new Date()}, {app: this.app}));
    secondUsers.add(new User({login: '2nd_user_c', created: new Date()}, {app: this.app}));

    callback(null, {
      adminUser: adminUser, // only `Model` object is passed to View from server to client
      aValue: 5,
      sampleText: 'sampleText', // `string` is passed, but key name is converted to all-lowercase 'sampletext'
      simpleObject: {s: 'simple'}, // Simple `object` is not passed to View from server to client
      complexObject: { a1: { b1: { c1: 'u'}, b2: 5}, a2: 3, a3: 'This complexObject can not be accessed in View.postRender()'},
      secondusers: secondUsers, // We can access this collection object in `View.postRender()`
      secondusersmodels: secondUsers.models // We can NOT access this array object in `View.postRender()`
    });
  }
};

• views/sample/index.js

  _outputValues: function() {
    console.log('[this.options.avalue]');
    console.log(this.options.avalue);    // available
    console.log('[this.options.sampletext]');
    console.log(this.options.sampletext);  // available
    console.log('[this.options.sampleText]');
    console.log(this.options.sampleText);
    console.log('[this.options.simpleObject]');
    console.log(this.options.simpleObject);
    console.log('[this.options.complexObject]');
    console.log(this.options.complexObject);
    console.log('[this.options.adminuser]');
    console.log(this.options.adminuser);
    console.log('[this.options.adminUser]');
    console.log(this.options.adminUser);  // available
  },
  initialize: function() {
    console.log('initialize() -- values from controller --');
    this._outputValues();
    console.log('end - initialize()');
  },
  postRender: function() {
    BaseView.prototype.postRender.call(this);
    console.log('postRender() -- values from controller --');
    this._outputValues();
    console.log('end - postRender()');
  }

[saponifi3d]

What does your HTML look like? Are any of the variables renamed or changed in that? The problem I've run into in the past was when passing through variables was because of HTML being case insensitive.

Also, what version of rendr are you using? Are you using rendr-handlebars?

[simongong]

Sorry for the late response. @saponifi3d There's nothing magic in the template, just direct reference to those hbs variables

<li>aValue: <span style="color: blue;">'{{aValue}}'</span></li>
<li>avalue: <span style="color: red;">'{{avalue}}'</span></li>
<li>sampleText: <span style="color: blue;">'{{sampleText}}'</span></li>
<li>sampletext: <span style="color: red;">'{{sampletext}}'</span></li>
<li>
Admin user name: '{{adminUser.attributes.login}}'<br>
</li>

Ande the dependencies are (the updated release)

  "dependencies": {
    "express": "~3",
    "rendr-handlebars": "0.2.0",
    "rendr": "0.5.0"
  },

But you enlightened me somehow when you mentioned that HTML is case insensitive. mmh...