search

omcljs / om

ClojureScript interface to Facebook's React
6.65k stars 364 forks source link

Changes to [:style :background-color] are ignored #230

Closed devurandom closed 10 years ago

devurandom commented 10 years ago

With the following code, the position and text colour of the element change when clicking it, but not its background colour:

(ns mies-om.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(def app-state (atom {:clicked false}))

(defn test-component [app-state owner]
  (reify
    om/IRender
    (render [_]
     (let [clicked (app-state :clicked)]
      (dom/div #js {:style #js {:position "relative"
                                :top (str (if clicked 100 0) "px")
                                :width "100px"
                                :height "100px"
                                :color (if clicked "#0000ff" "#ffffff")
                                :background-color (if clicked "#ff0000" "#000000")}
                    :onClick #(om/update! app-state [:clicked] true)}
               (str clicked))))))

(defn init []
  (om/root test-component app-state
           {:target (. js/document (getElementById "test-container"))}))

(enable-console-print!)

(set! (.-onload js/window) init)

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test Om</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <div id="test-container"></div>
        <script type="text/javascript" src="resources/react-0.11.1.js"></script>
        <script type="text/javascript" src="out/goog/base.js"></script>
        <script type="text/javascript" src="debug.js"></script>
        <script type="text/javascript">
            goog.require("mies_om.core");
        </script>
    </body>
</html>

project.clj:

(defproject mies-om "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2311"]
                 [om "0.7.1"]]
  :plugins [[lein-cljsbuild "1.0.3"]]
  :hooks [leiningen.cljsbuild]
  :source-paths ["src"]
  :cljsbuild {:builds {:debug {:source-paths ["src"]
                               :compiler {
                                          :output-to "debug.js"
                                          :output-dir "out"
                                          :source-map true
                                          :optimizations :none}}}})
the-kenny commented 10 years ago

Your project works fine here. Clicking the

changes the background color from black to red.

Maybe something else isn't quite right on your setup? Have you checked the properties of the DOM via the Inspector of your browser? You could also try the React Chrome Extension to inspect the React components itself.

Dennis Schridde notifications@github.com writes:

With the following code, the position and text colour of the element change when clicking it, but not its background colour:

(ns mies-om.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(def app-state (atom {:clicked false}))

(defn test-component [app-state owner]
  (reify
    om/IRender
    (render [_]
     (let [clicked (app-state :clicked)]
      (dom/div #js {:style #js {:position "relative"
                                :top (str (if clicked 100 0) "px")
                                :width "100px"
                                :height "100px"
                                :color (if clicked "#0000ff" "#ffffff")
                                :background-color (if clicked "#ff0000" "#000000")}
                    :onClick #(om/update! app-state [:clicked] true)}
               (str clicked))))))

(defn init []
  (om/root test-component app-state
           {:target (. js/document (getElementById "test-container"))}))

(enable-console-print!)

(set! (.-onload js/window) init)

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test Om</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <div id="test-container"></div>
        <script type="text/javascript" src="resources/react-0.11.1.js"></script>
        <script type="text/javascript" src="out/goog/base.js"></script>
        <script type="text/javascript" src="debug.js"></script>
        <script type="text/javascript">
            goog.require("mies_om.core");
        </script>
    </body>
</html>

project.clj:

(defproject mies-om "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2311"]
                 [om "0.7.1"]]
  :plugins [[lein-cljsbuild "1.0.3"]]
  :hooks [leiningen.cljsbuild]
  :source-paths ["src"]
  :cljsbuild {:builds {:debug {:source-paths ["src"]
                               :compiler {
                                          :output-to "debug.js"
                                          :output-dir "out"
                                          :source-map true
                                          :optimizations :none}}}})

Reply to this email directly or view it on GitHub: https://github.com/swannodette/om/issues/230

Moritz Ulrich

devurandom commented 10 years ago

Weird. My browser is Firefox 31.0 on Ubuntu 14.04. The HTML inspector shows that color and top change, but not background-color.

I will try the page in Chromium, also with the React extension, and report back.

devurandom commented 10 years ago

You are right. It works in Chromium 36.0, but not in Firefox 31.0. Is this a bug in Om and/or React that can be fixed?

the-kenny commented 10 years ago

Found the problem. It should be :backgroundImage, not :background-image. See http://facebook.github.io/react/tips/inline-styles.html

I personally recommend either om-tools or sablono to build the UI. The latter implements "standard" hiccup-syntax and is quite nice.

Dennis Schridde notifications@github.com writes:

You are right. It works in Chromium 36.0, but not in Firefox 31.0. Is this a bug in Om and/or React that can be fixed?

Reply to this email directly or view it on GitHub: https://github.com/swannodette/om/issues/230#issuecomment-52304017

Moritz Ulrich

the-kenny commented 10 years ago

:backgroundColor, obviously. My bad.

Dennis Schridde notifications@github.com writes:

You are right. It works in Chromium 36.0, but not in Firefox 31.0. Is this a bug in Om and/or React that can be fixed?

Reply to this email directly or view it on GitHub: https://github.com/swannodette/om/issues/230#issuecomment-52304017

Moritz Ulrich

devurandom commented 10 years ago

Thanks!

Thanks also for the hint regarding the Facebook React extension to Google Chrome / Chromium.