[{"data":1,"prerenderedAt":431},["ShallowReactive",2],{"project-8176672":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":84,"maker_in_thread":232,"shape":243,"grid":246,"attempts":393,"same_week":394,"maker_shows":41,"maker_hidden":423,"reader_version":424,"card":425},"8176672","Way.js","Simple, persistent, framework-agnostic two-way databinding","title","Show HN: Way.js – Simple, persistent, framework-agnostic two-way databinding","http:\u002F\u002Fgwendall.github.io\u002Fway\u002F","gwendall.github.io","ges",1408008566,2014,162,60,146,2272,7,"notable","languages","javascript data binding library","library",[24,25,26,27,28],"two-way data binding","javascript","form binding","localstorage","framework agnostic","mixed",-0.222,{"positive":32,"neutral":33,"mixed":32,"critical":33},3,10,26,{"design":36,"performance":39,"execution":40,"idea":42,"docs":43},{"positive":37,"critical":38},0,2,{"positive":37,"critical":37},{"positive":37,"critical":41},5,{"positive":38,"critical":38},{"positive":37,"critical":37},[45,37,45,41,32,37,45,45,37,37,37,41,32,41,37,32,37,37,37,37,37,37,37,32,32,45,37,37,45,45,37,37,32,32,37,45,37,45,32,32],1,null,{"problem":48,"audience":46,"pricing":46,"motivation":46,"time_to_build":46,"stack":62,"openness":82,"stage":83,"team_size":83},{"value":49,"source":50,"evidence":51},"Keeping JavaScript data and form inputs in sync without manual event handlers","inferred",[52,54,58],{"id":53},"post",{"id":55,"by":56,"text":57},"8176781","Kiro","Looks very straight-forward. Good job! OT: After building a couple of large applications in Angular I've come to realize that I seldom need two-way bindings. The school example…",{"id":59,"by":60,"text":61},"8177047","itry","Well, you can argue if 5 dependencies and 123 kilobytes of code is much or not. But what does it bring to the table? Your \"sub-total\" example would just need a normal javascript…",[63,69,78],{"value":64,"source":50,"evidence":65},"JavaScript",[66],{"id":67,"by":60,"text":68},"8176933","Is it really more painless to add way.js and its dependencies (jquery.js, underscore.js, underscore.json.js, form2js.js and js2form.js) to your page then to simply add a plain…",{"value":70,"source":71,"evidence":72},"jQuery","commenter",[73,74],{"id":67,"by":60,"text":68},{"id":75,"by":76,"text":77},"8176938","Ronsenshi","Great job, i just wish it was at least no dependent on several other libraries including jQuery.",{"value":79,"source":71,"evidence":80},"Underscore.js",[81],{"id":67,"by":60,"text":68},"open_source","unknown",{"praise":85,"objections":103,"requests":150,"questions":170,"alternatives":193},[86,98],{"value":87,"source":71,"evidence":88},"Simple, lightweight and low overhead",[89,93,94],{"id":90,"by":91,"text":92},"8176774","onion2k","Looks very nice indeed. Especially like the low overhead. I've been using an alternative, Cortex[1], recently. It's similar, but with a pubsub based eventing system so your…",{"id":55,"by":56,"text":57},{"id":95,"by":96,"text":97},"8177170","antonwinter","looks damn fine, less dependencies would be an added bonus",{"value":99,"source":71,"evidence":100},"Good job, looks clean",[101,102],{"id":75,"by":76,"text":77},{"id":95,"by":96,"text":97},[104,114,129,140],{"value":105,"source":71,"evidence":106},"Too many dependencies, especially jQuery",[107,111,112,113],{"id":108,"by":109,"text":110},"8177193","mattdesl","Polluting global scope and a hard dependency on jQuery.. :(",{"id":75,"by":76,"text":77},{"id":67,"by":60,"text":68},{"id":95,"by":96,"text":97},{"value":115,"source":71,"evidence":116},"Failed HTML injection test",[117,121,125],{"id":118,"by":119,"text":120},"8177058","chrismorgan","I applied to the example here the first test I always make of any things like this: HTML injection. Result: failure. ☹",{"id":122,"by":123,"text":124},"8177115","cwmma","yup, my go to test name: \\_(ʘ_ʘ)_\u002F \"'\u003C!--\u002F*༼ つ ◕_◕ ༽つ caused it to show { \"formData\": { \"name\": \"\\\\_(ʘ_ʘ)_\u002F \\\"'",{"id":126,"by":127,"text":128},"8177291","coolg54321","just this will do: \u003C! will show: { \"formData\": { \"name\": \"",{"value":130,"source":71,"evidence":131},"Invalid custom HTML attributes instead of data-attributes",[132,136],{"id":133,"by":134,"text":135},"8177077","sleepyhead","Why use invalid 'way-data'-attributes when there is data-attributes?",{"id":137,"by":138,"text":139},"8177383","rubiquity","We're still using HTML attributes, and in this case invalid HTML attributes, to add behavior via JavaScript? When are we going to learn :\u002F",{"value":141,"source":71,"evidence":142},"Two-way binding questioned as unnecessary versus plain event handlers",[143,146,147],{"id":144,"by":60,"text":145},"8176904","Does anybody have real world examples of websites that use this kind of thing? Im always under the assumption that the old \"post data to server, save it there\" model still works…",{"id":59,"by":60,"text":61},{"id":148,"by":60,"text":149},"8176917","> allowing users to enter a filter Wouldn't it be enough to add a keydown event to the field?",[151,158,163],{"value":152,"source":71,"evidence":153},"Support for arrays, dates and data formatting",[154],{"id":155,"by":156,"text":157},"8177484","lhorie","Maybe I'm just missing something, but is there no way to deal with arrays? You know, like looping through data and displaying things for each of them? (also related: what about…",{"value":159,"source":71,"evidence":160},"Remove jQuery dependency",[161,162],{"id":75,"by":76,"text":77},{"id":95,"by":96,"text":97},{"value":164,"source":71,"evidence":165},"Real-world usage examples",[166,167],{"id":144,"by":60,"text":145},{"id":168,"by":60,"text":169},"8177015","> One possible use case Sure, one can think up use cases. But I never had one. Thats why I asked for real world examples where 2-way-binding libraries are used.",[171,186],{"value":172,"source":71,"evidence":173},"How does it compare to Rivets.js, Ractive, Cortex or Knockout?",[174,178,182],{"id":175,"by":176,"text":177},"8176713","myhf","How does it compare to other framework-agnostic binders such as Rivets.js?",{"id":179,"by":180,"text":181},"8176849","dodyg","How do you compare this with ractivejs.org?",{"id":183,"by":184,"text":185},"8177791","jesalg","This is cool but in real world scenarios you need more functionality to make it useful. So far I've been using KnockoutJS where I don't need full-blown MVC and can get away with…",{"value":187,"source":71,"evidence":188},"How are changes to JS objects detected and reflected in the DOM?",[189],{"id":190,"by":191,"text":192},"8177620","nawitus","How does Way.js detect changes made in JavaScript to the values? E.g. if you set a new property to the object, is it reflected in the DOM?",[194,202,210,218,222,226],{"value":195,"source":71,"evidence":196},"Rivets.js",[197,198],{"id":175,"by":176,"text":177},{"id":199,"by":200,"text":201},"8178481","matthewmacleod","I would also suggest looking at Rivets (http:\u002F\u002Frivetsjs.com) which is my current go-to solution for this sort of thing.",{"value":203,"source":71,"evidence":204},"Knockout",[205,209],{"id":206,"by":207,"text":208},"8176995","dabernathy89","Has Knockout not worked for you?",{"id":183,"by":184,"text":185},{"value":211,"source":71,"evidence":212},"Ractive",[213,214],{"id":179,"by":180,"text":181},{"id":215,"by":216,"text":217},"8177167","nailer","A cursory glance: ractive uses mustache, way uses HTML attributes. Ractive requires you to actually create the binding, way just leverages that HTML.",{"value":219,"source":71,"evidence":220},"Mithril",[221],{"id":155,"by":156,"text":157},{"value":223,"source":71,"evidence":224},"Cortex",[225],{"id":90,"by":91,"text":92},{"value":227,"source":71,"evidence":228},"Angular",[229],{"id":230,"by":216,"text":231},"8177159","Vue \u002F Ractive \u002F React. I'm not a reactive programming nerd, I just want something simple, and all three of these are implemented so well.",{"comments":32,"answered":37,"key":233},[234,237,240],{"id":235,"text":236},"8177312","Thanks! Fixed. I added a \"way-html\" attribute (boolean, false by default) that you can pass to your DOM elements.",{"id":238,"text":239},"8176699","Github repo: https:\u002F\u002Fgithub.com\u002Fgwendall\u002Fway.js",{"id":241,"text":242},"8201917","It is now stand-alone and doesn't mess with global scope anymore (except for the \"way\" object allowing you to set watchers, etc)",{"commenters":244,"max_depth":18,"maker_replies":32,"first_comment_mins":245,"lifespan_hours":16},45,11,[247,249,253,255,257,261,263,267,271,272,275,276,277,279,282,285,288,290,295,297,300,303,304,307,310,312,314,316,318,321,324,326,329,330,333,335,336,338,340,341,343,346,349,350,354,356,359,361,364,365,368,369,372,374,379,382,384,387,389,391],[155,37,45,248,156,37],"project\u002Fcritical\u002Fnone",[250,37,37,251,252,37],"8177517","commenter\u002Fneutral\u002Fnone","nakovet",[254,37,37,251,156,37],"8177550",[133,45,45,256,134,37],"project\u002Fcritical\u002Fdesign",[258,45,37,259,260,37],"8177195","commenter\u002Fneutral\u002Fdesign","datashaman",[90,38,41,262,91,37],"project\u002Fpositive\u002Fnone",[264,32,32,265,266,37],"8176790","project\u002Fneutral\u002Fperformance","threeseed",[268,32,37,269,270,37],"8177018","other\u002Fneutral\u002Fnone","girvo",[230,32,37,269,216,37],[118,273,45,274,119,37],4,"project\u002Fcritical\u002Fexecution",[122,273,45,274,123,37],[126,273,45,274,127,37],[235,273,37,278,11,45],"maker\u002Fneutral\u002Fexecution",[280,41,37,269,281,37],"8177099","plq",[283,41,37,269,284,37],"8178230","woah",[286,41,37,269,287,37],"8178414","bstrom",[289,41,37,269,281,37],"8179022",[291,292,41,293,294,37],"8176867",6,"project\u002Fpositive\u002Fidea","ishener",[144,292,32,296,60,37],"project\u002Fneutral\u002Fidea",[298,292,37,251,299,37],"8176990","sehr",[301,292,41,293,302,37],"8177001","ishi",[168,292,37,251,60,37],[305,292,37,251,306,37],"8179531","skore",[308,292,32,296,309,37],"8177110","Lazare",[311,292,37,251,60,37],"8177252",[313,292,37,251,309,37],"8177316",[315,292,37,251,60,37],"8177378",[317,292,37,251,309,37],"8177521",[319,292,37,251,320,37],"8177540","nsomaru",[322,292,37,269,323,37],"8191880","arethuza",[325,292,37,269,216,37],"8177157",[327,292,37,251,328,37],"8177769","sanderjd",[206,292,37,251,207,37],[331,292,37,269,332,37],"8177581","Shorel",[238,18,37,334,11,45],"maker\u002Fneutral\u002Fnone",[175,18,32,296,176,37],[199,337,32,296,200,37],8,[108,339,45,274,109,37],9,[241,339,37,278,11,45],[55,33,37,342,56,37],"other\u002Fneutral\u002Fidea",[344,33,37,342,345,37],"8176792","progx",[347,33,37,342,348,37],"8176830","UweSchmidt",[67,33,45,274,60,37],[351,33,32,352,353,37],"8176963","project\u002Fmixed\u002Fexecution","jcrotor",[59,33,45,355,60,37],"project\u002Fcritical\u002Fidea",[357,33,37,251,358,37],"8177268","nissimk",[360,33,37,269,348,37],"8179427",[362,33,37,342,363,37],"8176844","AndrewDucker",[148,33,32,296,60,37],[366,33,37,342,367,37],"8177053","nitrogen",[75,245,32,352,76,37],[370,245,37,269,371,37],"8176989","batiste",[183,373,45,355,184,37],12,[375,376,32,377,378,37],"8177005",13,"project\u002Fneutral\u002Fdocs","danhanly",[380,376,37,251,381,37],"8177014","alexjeffrey",[137,383,45,256,138,37],14,[190,385,32,386,191,37],15,"project\u002Fneutral\u002Fexecution",[179,388,32,296,180,37],16,[215,388,32,390,216,37],"project\u002Fneutral\u002Fdesign",[95,392,32,352,96,37],17,[],[395,400,405,409,414,418],{"id":396,"name":397,"points":398,"category":399},"8187791","GIFyoutube",577,"creative",{"id":401,"name":402,"points":403,"category":404},"8178660","Tuff.gb",260,"games",{"id":406,"name":407,"points":408,"category":20},"8192801","Satellizer",221,{"id":410,"name":411,"points":412,"category":413},"8178940","Ad Detector",204,"security_privacy",{"id":415,"name":416,"points":417,"category":20},"8192287","Scraperjs",192,{"id":419,"name":420,"points":421,"category":422},"8183014","Practical Guide to Mobile Apps",131,"learning_science",false,"v2",{"id":426,"name":5,"line":6,"ai":423,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":427,"top":18,"kw":428,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":429,"url":9,"mix":430,"praise":87,"objection":105,"sub":21},8176672,-0.22,[24,25,26,27,28],"1015301100053503000000033100110033010133",[32,33,32,33],1794036521395]