Thread Details
  • State Not Answered
  • Replies 1 reply
  • Subscribers 353 subscribers
  • Views 543 views
  • Users 0 members are here
Forum Actions
Related

Something describing how handebars is used as far as drawing fields

Kenneth Brill

I am looking for some sort of tutorial or whatever about how handlebars fiels are used to create fields and how those fields would be read when saved.  

In my first case I am looking at checkboxes.  I see the field definition in clients/base/fields/bool and I see the edit definition in edit.hbs

in there I basically see

<input type="checkbox"{{#eq action 'disabled'}} disabled{{/eq}}{{#if value}} checked{{/if}}{{#if def.tabindex}} tabindex="{{def.tabindex}}"{{/if}}>

So I am wondering, do I need need to worry about names and ids in the HBS file?  What if my new field (based on checkboxes) needs a class or id to address it?  Is there any problem with me adding it here?

I am also looking fo rany information about what is passed to the HBS file at render time.  Is there a way to see that as there kinda was in smarty?

Parents
  • 0 Sugar Employee Badge

    Hey Kenneth,

    first question "how handlebars fields get created" you'll notice in record and list view hbs files a field handlebars helper like "{{field ../../this model=../}}" they're usually found inside of an {{#each }} iterator block so you loop over the js controller's array of field defs and call the {{field helper. That helper definition can be found in sidecar/src/view/hbs-helpers.js and basically what it does it just takes the field def and calls ViewManager.createField then pushes that Field component to the parent view's .fields array.

    the checkbox hbs - you can add whatever classes or data- attributes you need to the element to make it do what you want. the hbs is good for hardcoded classes or they can be more dynamic based on values passed to the template. I believe field templates get both the view and the view's model in your above bool edit.hbs "action" is referring to the js controller this.action.

    debugging -- I add my own custom handlebar helper to include/javascript/sugar7/hbs-helpers.js

    Handlebars.registerHelper('debug', function(a,b,c,d,e) {
    console.log('---');
    console.log('this: ', this);
    console.log('a: ', a);
    console.log('b: ', b);
    console.log('c: ', c);
    console.log('d: ', d);
    console.log('e: ', e);
});

    make sure you rm -rf cache/* after adding then you can go to any hbs file and do something like 

    {{debug ../this ../../this ../../../this }}

    the field helper will already log out the main "this" level and then you can pass in other levels (../this ../../this etc.) to see what else you can see.

Reply
  • 0 Sugar Employee Badge

    Hey Kenneth,

    first question "how handlebars fields get created" you'll notice in record and list view hbs files a field handlebars helper like "{{field ../../this model=../}}" they're usually found inside of an {{#each }} iterator block so you loop over the js controller's array of field defs and call the {{field helper. That helper definition can be found in sidecar/src/view/hbs-helpers.js and basically what it does it just takes the field def and calls ViewManager.createField then pushes that Field component to the parent view's .fields array.

    the checkbox hbs - you can add whatever classes or data- attributes you need to the element to make it do what you want. the hbs is good for hardcoded classes or they can be more dynamic based on values passed to the template. I believe field templates get both the view and the view's model in your above bool edit.hbs "action" is referring to the js controller this.action.

    debugging -- I add my own custom handlebar helper to include/javascript/sugar7/hbs-helpers.js

    Handlebars.registerHelper('debug', function(a,b,c,d,e) {
    console.log('---');
    console.log('this: ', this);
    console.log('a: ', a);
    console.log('b: ', b);
    console.log('c: ', c);
    console.log('d: ', d);
    console.log('e: ', e);
});

    make sure you rm -rf cache/* after adding then you can go to any hbs file and do something like 

    {{debug ../this ../../this ../../../this }}

    the field helper will already log out the main "this" level and then you can pass in other levels (../this ../../this etc.) to see what else you can see.

Children
No Data