two-way binding with Kioo?

Jacob Emcken

unread,

Jul 8, 2014, 5:00:40 AM7/8/14

to enf...@googlegroups.com

Hi.

I've made a small example with a two-way binding on a list of input fields using Om.

I have been fiddeling a bit with Kioo as well and was wondering if it's possible to do the same thing here?

index.html (Om example):

<html>
    <body>
        <div id="address-form"></div>
        <script src="http://fb.me/react-0.9.0.js"></script>
        <script src="out/goog/base.js" type="text/javascript"></script>
        <script src="om_tut.js" type="text/javascript"></script>
        <script type="text/javascript">goog.require("om_tut.core");</script>
    </body>
</html>

core.cljs (Om example):

(ns om-tut.core
(:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true])
(:require-macros [kioo.om :refer [defsnippet deftemplate]]))

(def app-state (atom {:address [{:street "Streetname"}
                                {:street "Highway"}
                                {:street "Other Streetname" :no "12"}]}))

(defn handle-change [e data k owner]
(om/transact! data k (fn [_] (.. e -target -value))))

(defn two-way-input [data owner k]
(let [text (get data k "")]
    (dom/input
      #js {:value text
           :onChange #(handle-change % data k owner)})))

(defn address-form [address owner]
(reify
    om/IRender
    (render [_]
      (dom/li nil
        (two-way-input address owner :street)))))

(defn address-form-list [app owner]
(reify
    om/IRender
    (render [this]
      (apply dom/ul nil
        (om/build-all address-form (:address app))))))

(om/root address-form-list app-state
{:target (. js/document (getElementById "address-form"))})

I've been looking a bit on Kioo's listen function but wasn't able to figure out how (if possible) ti obtain a similar result as in Om.
It seems to return everything I need though... an object with a value, state and path

Thanks for all the great work.
Cheers

Jacob Emcken

ckirkendall

unread,

Jul 8, 2014, 5:35:23 PM7/8/14

to enf...@googlegroups.com

I don't see anything that would be difficult to do with listen. Below is how I would structure it in Kioo.

address_list.html

</ul>

Code:

(defn handle-change [e data k owner]
(om/transact! data k (fn [_] (.. e -target -value))))

(defsnippet two-way-input "address_list.html" [:input] [data owner k]
{[:input] (do-> (set-attr :value (get data k)

(listen :on-change #(handle-change % data k owner))})

(defsnippet address-form "address_list.html" [:li] [address owner]
{[:li] (content (two-way-input address owner :street))})

(deftemplate address-form-list "address_list.html" [app owner]te

{[:ul] (content (om/build-all address-form (:address app))})

(om/root address-form-list app-state
{:target (. js/document (getElementById "address-form"))})

Creighton

Jacob Emcken

unread,

Jul 9, 2014, 5:11:53 PM7/9/14

to enf...@googlegroups.com

Awesome!

From the Om example on github.com I didn't realize that `owner` was parsed on.
It isn't the first time I get bitten by the fact that js is very "relaxed" with the amount of arguments a function is given compared to how many you would expect :)

Is there any reason why the example on github round trips the init function before going to the template "my-page"?
In the example you provided here you go straight for the template.

Thanks!

Reply all

Reply to author

Forward