om.next sablono 在按钮中渲染嵌套元素

Question

使用 om.next and sablono, I am trying to style a button with mdl, as seen there.

这是我在 render 方法中尝试的方法：

;; This works but misses the icon
[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
         :value "ok"}]

;; The following work, but I would like to avoid using a string
[:button {:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
           :dangerouslySetInnerHTML {:__html "<i class=\"material-icons\">add</i>" }}]


;; All the following do not render the inside of the icon properly

[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
         :dangerouslySetInnerHTML {:__html [:i {:className "material-icons"} "add"]}}]

[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"}
 [:i {:className "material-icons"} "add"]]

[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
         :dangerouslySetInnerHTML {:__html ~(html [:i {:className "material-icons"} "add"])}}]

Answer 1

我将不得不把 sablono 排除在等式之外。这个例子有效：

(defui MDSubmitButton
  Object
  (render [this]
    (dom/button (clj->js {:className "mdl-button mdl-js-button mdl-button--fab mdl-button--colored"})
                (dom/i (clj->js {:className "material-icons"}) "add"))))
(def md-submit-button (om/factory MDSubmitButton {:keyfn :id}))

我缺少的成分是这一行：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

，在标记中。

总的来说，这是我使用的所有标记：

<link href="/css/material.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

我认为Javascript需要连锁反应等等，只是不需要回答这个问题。

我怀疑您可能也错过了"Material Icons"。为了找出实际发生的事情，我按了 this page

中的 "Open in CodePen" graphic/button

om.next sablono 在按钮中渲染嵌套元素

om.next sablono render nested elements in a button

om

sablono