search

ckirkendall / kioo

Enlive/Enfocus style templating for Facebook's React and Om in ClojureScript.
Eclipse Public License 1.0
404 stars 39 forks source link

Request: support html-content #1

Closed JulianBirch closed 10 years ago

JulianBirch commented 10 years ago

I'm looking to try using this, but have a requirement to include raw HTML from a database. I know it's listed as "won't be supported" but it would be quite useful in this case...

ckirkendall commented 10 years ago

I can think of several ways to support this. I will try to sketch something out later today.

ckirkendall commented 10 years ago

One caveat is the HTML would be pulled in at compile time.

JulianBirch commented 10 years ago

Definitely wouldn't work for me, sadly. I see that JSX supports raw HTML, but I'm not sure how it achieves it or whether Om has abstracted away the feature that would allow you to do that.

http://facebook.github.io/react/docs/jsx-gotchas.html

The use case, incidentally, is a CMS or comment system.

Thanks for looking at it.

ckirkendall commented 10 years ago

I think there is a way to do this but it requires using Kioo with another library. @r0man's sablono will interpret an xml clojure data structure [:tag {:attr1 ""} "content"] into react nodes. You could create a remote call that returned the clojure xml representation to your app and use sablono to convert it into react nodes. This would allow you to use kioo for the page layout the structure around the comments but the comments themselves would be pushed in using sablono and cljs.reader.

(ns example
  (:require [om.core :as om :include-macros true]
            [kioo.core :as kioo include-macros]
            [cljs.reader :as edn]
            [sablono.core :as html :refer [html] :include-macros true]))

(defn comments-event-hander [app-cursor val]
   ;;do a remote call to get the 
   ;;html as a string in clojure xml 
   ;;[:tag {:attr1 "val1"} "content]
   (remote-comment-call val #(om/update! app assoc :comments (edn/read-string %))))

(defn my-page [app-cursor]
  (kioo/component "page-layout" 
    {[:#content]  (content (:content app-cursor)) 
     [:ul.comments] (content 
                      (html (:comments app-cursor))
JulianBirch commented 10 years ago

Looks like I might be able to do what I need just by setting a dangerouslySetInnerHTML attribute on the enclosing DIV.

http://facebook.github.io/react/docs/special-non-dom-attributes.html

I'll let you know. :)

ckirkendall commented 10 years ago

After thinking about this a bit more I think it can be done. If I get a change I will try to prototype something this weekend.

ckirkendall commented 10 years ago

I add the html-content transform. You can also now pull kioo from clojars.

ckirkendall commented 10 years ago

@JulianBirch I didn't state it before but the implementation of html-content works at run time and should eliminate the need to use dangerouslySetInnerHTML.