UpFront Presentation

Transcript

1. LayerVault

2. LayerVault

3. None
4. None
5. None
6. None
7. None

8. Enough Chit-Chat

9. Takeaways

10. DO NOT

11. <div id="Version3"> <img src="/image.png"> </div>

12. <script> for (var i = 0; i < this.versions.length; i++)

    { $('#Version' + i + ' img') .attr('src', '/bankrupt.png'); } </script>

13. <script> for (var i = 0; i < this.versions.length; i++)

    { $('#Version' + i + ' img') .attr('src', '/bankrupt.png'); } </script> Implies you’re keeping a reference to what exists on the page.

14. <script> for (var i = 0; i < this.versions.length; i++)

    { $('#Version' + i + ' img') .attr('src', '/bankrupt.png'); } </script> Implies you’re keeping a reference to what exists on the page. It also implies you’re an idiot.

15. <script> for (var i = 0; i < this.versions.length; i++)

    { $('#Version' + i + ' img') .attr('src', '/bankrupt.png'); } </script> This is not 2005. Also, your i is kind of being a dick.

16. DO

17. <div class="Version" data-id="33" data-user-id="1" data-project-id="9" > <img src="/image.png"> </div>

18. <script> $(function () { var pc = new VORE.PageController({}); });

    </script>

19. <script> $.get('/some_endpoint.html') .success(function (data) { $('#Container').append(data); }); </script>

20. <script> // within a "class"... initialize: function () { $('#Container')

    .on('click', 'li', this.delegate(this.onClick)); }, onClick: function (event) { // Do work, maybe use some data-* attributes }, //... </script>

21. <script> // ... initialize: function () { this.addEventListener( "openWormhole", this.delegate(this.onOpenWormhole)

    ); }, // ... </script> <script> // Somewhere in the nethers of the code this.fireEvent("openWormhole"); </script>

22. <script> $('.Version').filter('[data-project-id="9"]') .addClass('Selected'); </script>

23. <script> $('.Version').filter('[data-project-id="9"]') .addClass('Selected'); </script> Filtering based on arbitrary attributes. It’s

    like you never left your server.

24. <script> $('.Version').dfilter('project-id’, 9) .addClass('Selected'); </script> Or use our dfilter() method

    http://github.com/layervault/jquery.data.filter

25. Thanks! [email protected]