Skip to content

Instantly share code, notes, and snippets.

@freckletonj
Forked from anonymous/cljsfiddle_save.edn
Last active March 29, 2016 22:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save freckletonj/ea3fb7fa2165d06cf7db544562f8f114 to your computer and use it in GitHub Desktop.
Save freckletonj/ea3fb7fa2165d06cf7db544562f8f114 to your computer and use it in GitHub Desktop.
how to have an input with (essentially) two way binding
(def search-term (atom ""))
(defn input [model on-change]
(let [external-model (atom @model)
internal-model (atom (or @external-model ""))]
(fn [model on-change]
;; this is taken from recom - http://bit.ly/1SZ1OXn
(when (not= @external-model @model)
(.log js/console "changed to " @model)
(reset! external-model @model)
(reset! internal-model @model))
[:input.form-control
{:value @internal-model
:on-change (fn [e]
(let [v (.-value (.-target e))]
(reset! internal-model v)
(on-change @internal-model)))}])))
[:div
[input search-term (fn [v] (reset! search-term v))]
[:button {:on-click #(reset! search-term "")} "Reset"]]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment