I don't like this approach: "rendering every 'page' but making them all hidden except for the current one". It seems rather wasteful. (Also means you cannot make use if ReactCSSTransitionGroup for animating)
The other approach works well though. On Tue, 9 Dec 2014 16:26 Colin Yates <[email protected]> wrote: > As others have replied, storing *reified* components is usually a mistake. > I tend to think of it like this: > > - app-state is the global, stateful model which is owned, updated and > managed by you > - components are transient and are owned, updated and managed by om > > When it comes to nesting, the two approaches seems to be: > > - multimethods (see the 'basic' documentation) > - passing vars around in app-state or component-state > > After going down this rabbit hole I am of the opinion that multi-methods > are your friend first of all. > > For your specific use-case, I have the exact same need and solved it as > follows: > - store the page-key in app-state (literally a keyword indicating the > stage) > - switch on that key to chose the component to render (either > multi-method or simple condp =. > > For example: > > (ns my.page-1) (defn page [cursor owner] (om/component (dom/div nil "Hi > there page 1"))) > (ns my.page-2) (defn page [cursor owner] (om/component (dom/div nil "Hi > there page 2"))) > (ns my.page-3) (defn page [cursor owner] (om/component (dom/div nil "Hi > there page 3"))) > > In main: > > (ns my.main > (require [my.page-1 :as p1] > [my.page-2 :as p2] > [my.page-3 :as p3]) > > (defn om-root [app-state owner] > (om/build > (condp = (:page app-state) > :page-1 p1/page > :page-2 p2/page > :page-3 p3/page))) > > and then mount om-root. Changing page is as simple as changing the value > of :page in app-state. > > There are other approaches - rendering every 'page' but making them all > hidden except for the current one, but I like the simplicity of the above > approach. Even if you do have to handle things like remembering scroll > positions etc. of non-visible pages. > > Hope this helps. > > (which is also an excellent example of why multi-methods are so much nicer > ;)). > > On Sunday, 16 November 2014 08:08:09 UTC, David Mohl wrote: > > Hey Guys, > > > > I am very fresh to clojurescript and love it so far. I am in fact > currently trying to build my first webapp using clojure and compojure for > the backend, and om combined with secretary for the frontend, but I have a > lot of issues. > > > > While I slowly get a grasp of om, I am trying to 'switch' pages (or > views?) to give that feel of a responsive single-page app. To implement > this, I 'thought' I could simply create a root-app which mounts my other > views when I need them. Something like this: > > > > (defn default-view [app owner opts] > > (om/component (dom/h1 nil "Default View"))) > > > > (defn root-app [app] (om/component (:view app))) > > (def app-state (atom {:view (om/build default-view root-app)})) > > (om/root app-state root-app (aget (.getElementsByClassName js/document > "main") 0)) > > > > Very simple. The root app gets mounted into the main div, and the root > app mounts whatever is under :view inside the app-state. Works fine so far. > > > > I am access detail/1/, om mounts my detailview, the detailview mounts > all the components that it needs, one of them loading ajax. Now here comes > my problem, I am trying to use om/transact to change state. Something like: > > > > om/IInitState > > (init-state [_] (om/transact! app [:data] (fn [] []))) > > > > om/IWillMount > > (will-mount [_] (go (let [foo (<! (fetch-something))] > > (om/update! app #(assoc % :data foo))))) > > > > (I learned that from a example. (fetch-something) is doing a simple ajax > call through core.async.) > > > > Now when executing I am getting: "No protocol method > ITransact.-transact! defined for type function: function > root_app(app){if(typeof picky.core.t16273 !== 'undefined'). " > > > > This error tells me that ITransact is not implemented in my root_app > which I used for building all the other components. So I must have done > something wrong or the approach of using a root_app to mount everything > else is simply not working. > > > > Anyone here who can point me into the right direction? Would appreciate > any help > > -- > Note that posts from new members are moderated - please be patient with > your first post. > --- > You received this message because you are subscribed to the Google Groups > "ClojureScript" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/clojurescript. > -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/clojurescript.
