{"action":"created","issue":{"url":"https://api.github.com/repos/ractivejs/ractive/issues/2176","labels_url":"https://api.github.com/repos/ractivejs/ractive/issues/2176/labels{/name}","comments_url":"https://api.github.com/repos/ractivejs/ractive/issues/2176/comments","events_url":"https://api.github.com/repos/ractivejs/ractive/issues/2176/events","html_url":"https://github.com/ractivejs/ractive/issues/2176","id":108738947,"number":2176,"title":"The many places for functions","user":{"login":"matthew-dean","id":414752,"avatar_url":"https://avatars.githubusercontent.com/u/414752?v=3","gravatar_id":"","url":"https://api.github.com/users/matthew-dean","html_url":"https://github.com/matthew-dean","followers_url":"https://api.github.com/users/matthew-dean/followers","following_url":"https://api.github.com/users/matthew-dean/following{/other_user}","gists_url":"https://api.github.com/users/matthew-dean/gists{/gist_id}","starred_url":"https://api.github.com/users/matthew-dean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthew-dean/subscriptions","organizations_url":"https://api.github.com/users/matthew-dean/orgs","repos_url":"https://api.github.com/users/matthew-dean/repos","events_url":"https://api.github.com/users/matthew-dean/events{/privacy}","received_events_url":"https://api.github.com/users/matthew-dean/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ractivejs/ractive/labels/question","name":"question","color":"cc317c"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-09-28T20:22:41Z","updated_at":"2015-09-29T16:33:37Z","closed_at":"2015-09-29T00:54:07Z","body":"Okay, this may be obvious to everyone else who uses Ractive, and not an issue, but I find remembering all the places where to put functions when making a new Ractive maddening.\r\n\r\nIf I want to have a type of evaluation function like ```{{ somefunc(val) }} ```, I have to do this:\r\n```js\r\nractive = new Ractive({\r\n\tel: $target[0]\r\n\t, template: $template.html()\r\n\t, data: ractiveData\r\n});\r\n```\r\n...and then I think, \"Wait, never mind, I can't do anything with this; I need to put it inside my data.\" So then I have to do this:\r\n```js\r\nractiveData.somefunc = function() {  // stuff };\r\nractive = new Ractive({\r\n\tel: $target[0]\r\n\t, template: $template.html()\r\n\t, data: ractiveData\r\n});\r\n```\r\n(If you're asking, \"Why not just expand data{} and put the function there\" it's because I often have generic functions that pass in data to make a Ractive, and while the data changes, the functions do not, because the functions are a requirement of the *template* not the data, so the functions have to be attached after the data object is received.)\r\n\r\nLater, I decide to call a custom function within an element like:\r\n```\r\n<button on-click=\"preset({ render: [{ keypath: 'data.LAST_INVOICE',  id: 'invoice_body' }]  })\" />\r\n```\r\nInevitably, that's where I go wrong. I usually make the mistake of putting the function attached to the data, or if I defined the custom functions, and decide to add an evaluation function later, I usually make the mistake of putting those functions together. Instead I need to do:\r\n```js\r\nractiveData.somefunc = function() {  // stuff };\r\n// ractiveData.preset = function() // stuff };  NOPE\r\nractive = new Ractive({\r\n\tel: $target[0]\r\n\t, template: $template.html()\r\n\t, data: ractiveData\r\n\t, preset: function() { // stuff }\r\n});\r\n```\r\nThen, later I want to fire an event delegate, so it looks like:\r\n```js\r\nractiveData.somefunc = function() {  // stuff };\r\n// ractiveData.preset = function() // stuff };  NOPE\r\nractive = new Ractive({\r\n\tel: $target[0]\r\n\t, template: $template.html()\r\n\t, data: ractiveData\r\n\t, preset: function() { // stuff }\r\n//\t, nextStep: function(e, args) { }  NOPE, HAHA SUCKER\r\n//\t, prevStep: function(e, args) { }\t\r\n});\r\nractive.on({ \r\n\t, nextStep: function(e, args) { }  //and I always forget the event var being passed in here\r\n\t, prevStep: function(e, args) { }\r\n});\r\n```\r\nSo, in the end, I end up with this \"spread out\" effect.\r\n\r\nNow, I'm sure for developers familiar with the internals of Ractive, the mental models for each of these differences makes their placement more obvious than it does to me. But, for me, it's 3 different ways of \"registering\" functions for Ractive, with 3 different locations for that registration, and with some (or one) type passing in an undeclared event, and the others not. (I sometimes mistakenly put the event var in data functions or custom functions.)\r\n\r\nTo me, this spread out and inconsistent model doesn't make sense. I'd rather tell Ractive: \"HEY MY CUSTOM FUNCTIONS ARE HERE\" in one place and then use them where I want and how I want in my template, to evaluate things as helper functions or when firing events, whether that's as a delegate or not. And I wish events were attached to this.event or some such mechanism so that I wouldn't have to remember which function type passes in an event.\r\n\r\nIt's also frustrating because Ractive is so generous about scope with keypaths, where it searches up the object for a matching key, but with functions, it punches me in the face repeatedly and tells me I look ugly if I put them in the wrong place.\r\n\r\nI should say: I absolutely love Ractive probably over any templating or data binding system I've used. But this particular facet makes me crazy.\r\n\r\nOr maybe I'm doing all of this wrong and there's something incredibly simple that I'm not seeing.\r\n\r\nHelp and/or counselling wanted. Thank you for your time."},"comment":{"url":"https://api.github.com/repos/ractivejs/ractive/issues/comments/144113058","html_url":"https://github.com/ractivejs/ractive/issues/2176#issuecomment-144113058","issue_url":"https://api.github.com/repos/ractivejs/ractive/issues/2176","id":144113058,"user":{"login":"Rich-Harris","id":1162160,"avatar_url":"https://avatars.githubusercontent.com/u/1162160?v=3","gravatar_id":"","url":"https://api.github.com/users/Rich-Harris","html_url":"https://github.com/Rich-Harris","followers_url":"https://api.github.com/users/Rich-Harris/followers","following_url":"https://api.github.com/users/Rich-Harris/following{/other_user}","gists_url":"https://api.github.com/users/Rich-Harris/gists{/gist_id}","starred_url":"https://api.github.com/users/Rich-Harris/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Rich-Harris/subscriptions","organizations_url":"https://api.github.com/users/Rich-Harris/orgs","repos_url":"https://api.github.com/users/Rich-Harris/repos","events_url":"https://api.github.com/users/Rich-Harris/events{/privacy}","received_events_url":"https://api.github.com/users/Rich-Harris/received_events","type":"User","site_admin":false},"created_at":"2015-09-29T16:33:37Z","updated_at":"2015-09-29T16:33:37Z","body":"Referencing #1172 so I can find this issue again, should I ever need evidence that the proxy event syntax adds an unnecessary layer of confusion."}}