kitchen-cli icon indicating copy to clipboard operation
kitchen-cli copied to clipboard

Template variable substitution for custom input template

Open paulbalomiri opened this issue 8 years ago • 9 comments

Hi,

When using the field.input_template option, the value substituted for FIELD_VALUE is escaped by {{}}

Unfortunately i cannot use that value as a template argument, as this breaks:

{{> form_ui_input_template name="FIELD_NAME" grpclass="FIELD_GROUP_CLASS" id="FIELD_ID" }}

I am trying to delegate the rendering of this to my external package, thus i would need access to the unescaped form.

I could unescape it in the .js code and then do some eval in a helper, but that seems rather hackish, given that it's not a general rule for template variable replacements to be escaped.

I also have some ideas for more small changes that would help greatly in delegating functionality, but i don't know if this is the right place for those. Do you plan to open a general enhancement issue?

Ah and one more thing if you don't mind:). The overall use of the term Template was a bit confusing for me when getting started and to an extent it still is, as there are Meteor Templates and Meteor Kitchen Templates.

Thank you for your initiative with meteorkitchen.com, it speeds up the setup of a project and i really appreciate the effort you put into it!

paulbalomiri avatar Mar 07 '16 08:03 paulbalomiri

I think I can add this into next version too, but please clarify little bit: what is desired input in your .json and what is desired output? (can we keep both current functionality and your proposed with external template?).

BTW, I'm always open for enhancement suggestions - thank you. Feel free to add issue for each and mark as "enhancement".

About terminology - there is a lot of confusing terms (especially now with react - "kitchen component" vs "react component" (should be "kitchen widget" or something different than component)... but there is a lot of other things to do (day is only 24 hours long here :D )

perak avatar Mar 07 '16 09:03 perak

Scope

What i'm trying to do is implement a delegating Kitchen Template to pick up the rendering in a Meteor Template. Thus i need basically all the field json in my template as an argument.

Problem at hand

In this specific problem i just need to pass the value as a template argument

At the moment {{> tmpl val="FIELD_VALUE"}} would render to

{{> tmpl val="{{some_query.property}}"}

While {{> tmpl val=FIELD_VALUE}} reders to ``{{> tmpl val={{some_query.property}}}` which is a syntax error.

So i would need this FIELD_VALUE to render to some_query.property instead of {{some_query.property}}, as does FIELD_LABEL and some of the other Kitchen Template variables.

More general solutions?

  1. Provide the whole field JSON in some variable (basically the component json)
  2. Provide the whole App JSON to the meteor app (perhaps in Meteor.settings ?)

EDIT: The best solution for me would be to have a field where i could just tell kitchen what template to use for rendering the field

EDIT 2 :smiley: So now you revealed what planet you are from. 24h - pah.... :smiley:

paulbalomiri avatar Mar 07 '16 10:03 paulbalomiri

So more succinct what i missed in the previous post. Perhaps the variables should as a rule contain unescaped template variables & literals .

  • "string" not {{"string"}}
  • object.prop not {{object.prop}}

Also sometimes you want {{}} while other times {{{}}}. I think this is best left to the template editing.

paulbalomiri avatar Mar 07 '16 10:03 paulbalomiri

Ah, now I understand... OK, I'll see what can I do.

BTW, there is kitchen "plugin" system. You can create your "plugin.js" file, and when kitchen is generating the app, it executes "node plugin.js" and passes object from input .json as argument. Inside this file, your responsibility is to create .html and .js code (however you want - load template from file, modify it based on component .json from input file or whatever), and store them into variable. Then, generator uses your .html and .js and inserts them into proper page(s). See example plugins.

This way, you can build components and use them in the same way as built-in components.

This "plugin system" is not perfectly implemented but can be useful. Idea is to make central plugin repository (similar to atmosphere or npm) - so people can share their plugins... but that maybe if I move to planet Venus (day is much-much longer there!). :)

perak avatar Mar 07 '16 10:03 perak

Yes, but i wanted to avoid taking over the whole form, when i just needed a field Customisation. In the end I wrote the page template, and that is my Meteor Template hook point.

paulbalomiri avatar Mar 07 '16 10:03 paulbalomiri

OK, I understand. :+1:

perak avatar Mar 07 '16 10:03 perak

Then, generator uses your .html and .js and inserts them into proper page(s)

Would it be possible that you also pick up on .coffee , .cs and .jade files? If for the generator it's just files without syntax parsing, than that would help a lot the coffeescript/jade devs.

Two JSON fields at the app level

  • 'meteor_template_file_extensions=[".html", ".jade", ".haml"]' e.t.c
  • 'meteor_code_file_extensions=[".js",".cs", ".cs.md"]' etc

would also clarify what is now implicit.

Also some fields (i can't remember which) actually require that you add the extension to the JSON property value (e.g. "template.html") while others like input_template do not.

EDIT: actually this would only be feasible on a per plugin basis, otherwhise - like in this Issue's case- html and jade would be mixed.

paulbalomiri avatar Mar 07 '16 11:03 paulbalomiri

Hey, maybe this helps: https://github.com/perak/kitchen-custom-form-field

perak avatar Mar 07 '16 21:03 perak

Sorry i'm a bit ~~at a loss~~ lost . How do i get the data in there :) :+1: for making a showcase repo!

paulbalomiri avatar Mar 09 '16 14:03 paulbalomiri