Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2015-11-13

Channels

#re-frame
<
2015-11-13
>
richiardiandrea00:11:21

@gregg yes I was reading and yes it should ! 😄

roberto18:11:24

how do you guys make the page apply the changes (using figwheel) ?

roberto18:11:37

I used the re-frame lein template, but I still have to refresh

roberto18:11:07

I’m doing this: my init cljs function has this signature (defn ^:export init [] …)

roberto18:11:35

and in the html: <script>my-ns.core.init();</script>

roberto18:11:04

it loads it when I re-load the page, but when I make changes to the cljs files, it doesn’t. I can see it recompiles it, but it won’t load the changes on the dom.

roberto18:11:28

If I call ‘init()’ explicitly in core.cljs, it does do it ho

richiardiandrea18:11:29

@roberto: do you have the following? 

:cljsbuild {:builds [{:id "dev"
                        :source-paths ["src/cljs" "test/cljs"]
                        :figwheel {:on-jsload "launcher.test/run"}

roberto18:11:43

oh, I don’t have that on-jsload

richiardiandrea18:11:50

try it out 😄

roberto18:11:15

hmmm, I get a weird exception Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

roberto18:11:28

it loads correctly the first time tho

richiardiandrea18:11:03

are you getting the an existing DOM element with reagent/render?

richiardiandrea18:11:15

(sorry for the silly question)

roberto18:11:43

(defn mount-root []
  (reagent/render [current-page] (.getElementById js/document "app")))

(defn ^:export init []
  (.log js/console "IN init!")
  (routes/app-routes)
  (mount-root))

(defn on-reload []
  (.log js/console "The DOM EL:  " (.getElementById js/document "app"))
  (.log js/console "CURRENT PAGE:  " current-page)
  (init))

roberto18:11:51

both current page and the dom have a value

richiardiandrea18:11:49

weird, I have had that error only when I did not have any app in my index.html

roberto18:11:14

hmmm, ok, will debug some more

roberto18:11:19

thank you for the help

roberto18:11:50

I think the issue might be that the views are nested

roberto18:11:00

(defn outreach-list []
  (let [ls (subscribe [:outreach-list])]
    (fn []
      (.log js/console "OUTREACH : " (clj->js @ls))
      [:div.row {:style {:margin-left "0.1em"}}
       [:div.row>div.bootcards-list>div.panel.panel-default>div.list-group
        [:div.list-group-item>h4.list-group-item-heading "Outreach List"]
        (for [outreach @ls]
          (let [id   (:_id outreach)
                date (:date outreach)]
            ^{:key id} [:a.list-group-item {:href "#"}
                        [:h4.list-group-item.heading date]
                        [:p.list-group-item-text
                         [:div>span "Hey"]]]))]])))


(defn app []
  (fn []
    (.log js/console "IN App...")
    [:div.row.container-fluid {:style {:margin-left "0.5em"}}
     [:div.container.col-md-10
      [outreach-list]]]))

(defn main-panel []
  (fn []
    (.log js/console "IN main panel ")
    [:div
     [navbar]
     [app]]))

roberto18:11:52

So I’m thinking that app can’t render because main-panel is being re-rendered, or something like that

roberto18:11:57

just thinking out loud

richiardiandrea18:11:18

mmm no that shoud work, I have never had any problem with it

richiardiandrea18:11:18

in app and main-panel you are using a form-2 render with no state, you might as well just return the hiccup

richiardiandrea18:11:37

but it should not change much

richiardiandrea18:11:09

it looks like you are losing some DOM element for some reason the second time

richiardiandrea18:11:10

according to my experience, this happens when there is some rendering initial error but your code looks ok

roberto18:11:17

do I still need to call init explicitly in the html?

richiardiandrea18:11:06

like this: 

<script>
         window.prstr = function (obj) { return cljs.core.pr_str(obj) };
         window.onload = function () { cljs_browser_repl.core.main(); }
    </script>

roberto18:11:35

you put that in the body or the head?

roberto18:11:44

when I use that, now my page won’t load the first time

roberto18:11:59

I get the Invariant Violation error there too

roberto18:11:15

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Bootcards CSS for desktop: -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- Bootstrap and Bootcards JS -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <title>PASMO Outreach</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="/js/app.js" type="text/javascript"></script>
    <script>
      window.onload = function () { pasmo_outreach.ui.core.init(); }
    </script>
  </body>
</html>

richiardiandrea18:11:59

well again, very weird, it looks good

roberto18:11:19

ah, yeah, it is weird. For some very strange reason, it can’t find the dom element. But if I don’t use onload, it does find it.

richiardiandrea18:11:03

what if you comment out (routes/app-routes)?

roberto18:11:48

if I comment that, then I do get the dom element, but now I get a different error. It complains that the hiccup form is in valid. I’ll change it back to Form 2

richiardiandrea18:11:18

yeah these is the biggest pain atm, debugging 😄

roberto18:11:34

got it to work

roberto19:11:06

so, I didn’t use onload and my on-reload function only calls mount-root instead of the entire init funciton

richiardiandrea21:11:21

Sorry again if I ask here, but is there a way to align (pushing based on the widest) the first column in a re-columb h-box?

richiardiandrea21:11:53

I mean align the red boxes to INTEROP here

mikethompson23:11:02

Only if you explicitly set their width or min-width or something

mikethompson23:11:13

There is nothing "linking" their widths currently

richiardiandrea23:11:04

yep, I even thought of doing it dynamically, but it is too convoluted, thanks @mikethompson

richiardiandrea23:11:36

dynamically meaning taking the width from the component life cycle methot component-did-mount