{"action":"created","issue":{"url":"https://api.github.com/repos/radi-js/radi/issues/23","repository_url":"https://api.github.com/repos/radi-js/radi","labels_url":"https://api.github.com/repos/radi-js/radi/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/radi-js/radi/issues/23/comments","events_url":"https://api.github.com/repos/radi-js/radi/issues/23/events","html_url":"https://github.com/radi-js/radi/issues/23","id":319655648,"number":23,"title":"Feature Request: Custom Attributes","user":{"login":"Rud156","id":17374395,"avatar_url":"https://avatars1.githubusercontent.com/u/17374395?v=4","gravatar_id":"","url":"https://api.github.com/users/Rud156","html_url":"https://github.com/Rud156","followers_url":"https://api.github.com/users/Rud156/followers","following_url":"https://api.github.com/users/Rud156/following{/other_user}","gists_url":"https://api.github.com/users/Rud156/gists{/gist_id}","starred_url":"https://api.github.com/users/Rud156/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Rud156/subscriptions","organizations_url":"https://api.github.com/users/Rud156/orgs","repos_url":"https://api.github.com/users/Rud156/repos","events_url":"https://api.github.com/users/Rud156/events{/privacy}","received_events_url":"https://api.github.com/users/Rud156/received_events","type":"User","site_admin":false},"labels":[{"id":799649267,"url":"https://api.github.com/repos/radi-js/radi/labels/good%20first%20issue","name":"good first issue","color":"7057ff","default":true},{"id":869183477,"url":"https://api.github.com/repos/radi-js/radi/labels/proposal","name":"proposal","color":"f9a22f","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-05-02T18:05:41Z","updated_at":"2018-05-04T16:25:03Z","closed_at":null,"author_association":"NONE","body":"> I don't think that this exists even in React as of now. But I found this feature really helpful in making custom functions for my application.\r\n\r\n- The basic idea here is that we can pass in a custom attribute to the element that is linked to a global function or local function that defines functionality of the attribute\r\n\r\n#### Example\r\n- `<img src=\"Someting.jpg\" />`. In case this fails you need to add a `onError` handler to manage the error state. Moreover these functions needs to be defined throughout the application and adding more functionality in such cases is difficult.\r\n- So the custom attribute will do something like `<img source=\"Someting.jpg\" />`. The `source` attribute is technically a function that takes the value and a reference to the element.\r\n- Just custom functionality can be added more easily\r\n\r\n#### In case I was unable to explain it properly Aurelia.JS has it and its pretty useful. https://aurelia.io/docs/templating/custom-attributes#introduction"},"comment":{"url":"https://api.github.com/repos/radi-js/radi/issues/comments/386653471","html_url":"https://github.com/radi-js/radi/issues/23#issuecomment-386653471","issue_url":"https://api.github.com/repos/radi-js/radi/issues/23","id":386653471,"user":{"login":"pichardoJ","id":12650088,"avatar_url":"https://avatars2.githubusercontent.com/u/12650088?v=4","gravatar_id":"","url":"https://api.github.com/users/pichardoJ","html_url":"https://github.com/pichardoJ","followers_url":"https://api.github.com/users/pichardoJ/followers","following_url":"https://api.github.com/users/pichardoJ/following{/other_user}","gists_url":"https://api.github.com/users/pichardoJ/gists{/gist_id}","starred_url":"https://api.github.com/users/pichardoJ/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pichardoJ/subscriptions","organizations_url":"https://api.github.com/users/pichardoJ/orgs","repos_url":"https://api.github.com/users/pichardoJ/repos","events_url":"https://api.github.com/users/pichardoJ/events{/privacy}","received_events_url":"https://api.github.com/users/pichardoJ/received_events","type":"User","site_admin":false},"created_at":"2018-05-04T16:25:03Z","updated_at":"2018-05-04T16:25:03Z","author_association":"NONE","body":"Thinking about this I think the only way to preserve immutability would be to decorate the element, having either the class or the function render to something like:\r\n\r\n```javascript\r\nclass Source extends Radi.Attribute {\r\n\r\n     constructor({value, upper}){}\r\n\r\n    view(element){\r\n        return <element href=\"{`/${this.upper ? this.upper.toUpperCase() :  this.value}\" />\r\n    }\r\n}\r\n```\r\n\r\nor with function sintax \r\n\r\n```javascript \r\n\r\ncustomAttribute('source', element => <element href = \"{`/${this.upper ? this.upper.toUpperCase() :  this.value}\"/>);\r\n\r\n// Or something semi-schematized like\r\n\r\ncustomAttribute('source', {\r\n    props: ['value', 'upper'],\r\n    view: element => <element href = \"{`/${this.upper ? this.upper.toUpperCase() :  this.value}`}\"/>\r\n});\r\n```\r\n\r\n\r\n"}}
{"actor":{"display_login":"pichardoJ"}}