diff --git a/examples/select.rkt b/examples/select.rkt index fdb4a36..a0d5b9c 100644 --- a/examples/select.rkt +++ b/examples/select.rkt @@ -2,13 +2,26 @@ (require (planet dyoo/whalesong/web-world)) +(define (draw w v) + (define v2 (view-focus v "fill-me-in")) + (update-view-text v2 w)) -(define view (xexp->view '(select (@ (id "my-select")) +(define view (xexp->dom '(div + (h1 "test") + (select (@ (id "my-select")) (option (@ (value "red")) "Red") (option (@ (value "green")) "Green") - (option (@ (value "blue")) "Blue")))) - + (option (@ (value "blue")) "Blue")) + (p + "I see: " + (span (@ (id "fill-me-in"))))))) +(define (when-select-changed w v) + (printf "I see: ~s\n" (view-form-value (view-focus v "my-select"))) + (view-form-value (view-focus v "my-select"))) + +(define bound-view (view-bind-many view ["my-select" "change" when-select-changed])) -(big-bang 'undefined - (initial-view view)) \ No newline at end of file +(big-bang "nothing yet" + (initial-view bound-view) + (to-draw draw)) \ No newline at end of file diff --git a/web-world/js-impl.js b/web-world/js-impl.js index df2ac04..28519bf 100644 --- a/web-world/js-impl.js +++ b/web-world/js-impl.js @@ -66,6 +66,23 @@ return result; }; + + // Deeply clones a dom node. + // + // Note: we have to do a small hack to propagate the values of + // select forms. See: https://github.com/dyoo/whalesong/issues/91 + var deepClone = function(dom) { + var theClone = $(dom).clone(true).get(0); + var sourceSelects = $(dom).find("select"); + var destSelects = $(theClone).find("select"); + var i; + for (i = 0; i < sourceSelects.length; ++i) { + $(destSelects[i]).val($(sourceSelects[i]).val()); + } + return theClone; + }; + + // CPS'd version of for-each, used on JavaScript arrays. // @@ -124,7 +141,7 @@ function(tree) { return tree[0].nodeType !== 1; }; - return TreeCursor.adaptTreeCursor(domNodeToArrayTree($(dom).clone(true).get(0)), + return TreeCursor.adaptTreeCursor(domNodeToArrayTree(deepClone(dom)), domOpenF, domCloseF, domAtomicF); @@ -526,7 +543,7 @@ }, function(eventHandlers) { return eventHandlers; }, function(view) { - var clone = $(domNode).clone(true); + var clone = deepClone(domNode); clone.appendTo($(view.focus)); view.focus = clone.get(0); } @@ -540,7 +557,7 @@ }, function(eventHandlers) { return eventHandlers; }, function(view) { - var clone = $(domNode).clone(true); + var clone = deepClone(domNode); clone.insertAfter($(view.focus)); view.focus = clone.get(0); } @@ -554,7 +571,7 @@ }, function(eventHandlers) { return eventHandlers; }, function(view) { - var clone = $(domNode).clone(true); + var clone = deepClone(domNode); clone.insertBefore($(view.focus)); view.focus = clone.get(0); }