Создать всплывающее окно с Clojurescript - PullRequest
Новая
       4

Создать всплывающее окно с Clojurescript

0 голосов
/ 03 октября 2019

Я новичок в Clojurescript и пытаюсь протестировать основные функции - в этом случае создается всплывающее окно.

Этот код отображает кнопку: 

            [:div {:class "dim-a item"}
             [dc :div {:dc-id 3 :hidden false}
              [:div {:class "item"
                     :style {:border        "1px solid #D4D4D4"
                             :border-radius "3px"}}
               [:div [bp/icon {:icon "grid-view" :style {:color "#555555"}}] [:br] "Color"]]]]

Это то, что я пыталсясоздать всплывающее окно, но оно не компилируется. 

            [:div {:class "dim-a item"}
             [dc :div {:dc-id 3 :hidden false}
              [:div {:class "item"
                     :style {:border        "1px solid #D4D4D4"
                             :border-radius "3px"}}
               [:div [bp/icon {:icon "grid-view" :style {:color "#555555" {:on-click  #(reset! popup-shown false)}
                                                         [:div.alert.alert-info
                                                            [:div "Hello!"]]}}] [:br] "Color"]]]]

Кто-нибудь может увидеть, что я делаю неправильно?

РЕДАКТИРОВАТЬ: Когда я пытаюсь это: 

            [:div {:class "dim-a item"}
             [dc :div {:dc-id 3 :hidden false}
              [:div {:class "item"
                     :style {:border        "1px solid #D4D4D4"
                             :border-radius "3px"}}
                 [:div [bp/icon {:icon "grid-view"
                                 :style {:color "#555555" {:on-click  #(reset! popup-shown false)}}}
                        [:div.alert.alert-info
                          [:div "Hello!"]]] [:br] "Color"]]]]

Я получаю это: 

------ ERROR -------------------------------------------------------------------
 File: /Users/reallymemorable/Documents/m/renderer.cljs:750:100
--------------------------------------------------------------------------------
 747 |                      :style {:border        "1px solid #D4D4D4"
 748 |                              :border-radius "3px"}}
 749 |                  [:div [bp/icon {:icon "grid-view"
 750 |                                  :style {:color "#555555" {:on-click  #(reset! popup-shown false)}}}
----------------------------------------------------------------------------------------------------------^
m/renderer.cljs [line 750, col 100] The map literal starting with :color on line 750 column 41 contains 3 form(s). Map literals must contain an even number of forms.

--------------------------------------------------------------------------------
 751 |                         [:div.alert.alert-info
 752 |                           [:div "Hello!"]]] [:br] "Color"]]]]
 753 | 
 754 |             [:div {:class "dim-c"}
--------------------------------------------------------------------------------

РЕДАКТИРОВАТЬ # 2:

Я понимаю, что частью моей трудности было то, что код on-click, который я скопировал из другого источника, содержал несущественные детали. Я начал заново с гораздо более простого примера. 

[:div {:class "bp3-button"} [bp/icon {:icon "globe" :on-click "hello" :style {:color "#555555"}}]]

Приведенный выше код компилируется, но когда я нажимаю на значок, ничего не происходит. Извините, я знаю, что это ужасный способ получить помощь в вопросе, но он совершенно новый для Clojurescript и чувствует себя в темноте.

Ответы [ 2 ]

1 голос
/ 16 октября 2019

Это не решит ваш первоначальный вопрос, но я продолжил и создал небольшой демонстрационный проект в этом репо , который отображает пару кнопок, одна просто печатается на консоли, а вторая показывает примердиалоговое окно, как на скриншоте ниже:

enter image description here

Должно работать с yarn install ; yarn run html ; yarn run watch.

1 голос
/ 03 октября 2019

Немного сложно не увидеть фактическую ошибку компиляции или то, для чего предназначено пространство имен bp (я предполагаю, что оно связано с Bootstrap?), Но если вы немного исправите отступ, я думаю, что это следующее:

У вас есть это 

[:div [bp/icon {:icon "grid-view"
                :style {:color "#555555" {:on-click  #(reset! popup-shown false)}
                        [:div.alert.alert-info
                         [:div "Hello!"]]}}] [:br] "Color"]]]]

Ваш [:div.alert.alert-info неуместен как ребенок :style. Я думаю, что вы имели в виду: 

[:div [bp/icon {:icon "grid-view"
                :style {:color "#555555" {:on-click  #(reset! popup-shown false)}}}
       [:div.alert.alert-info
        [:div "Hello!"]]] [:br] "Color"]]]]

Редактировать : Исходя из вашего вывода, код, вероятно, должен выглядеть следующим образом: 

[:div [bp/icon {:icon "grid-view"
                :on-click  #(reset! popup-shown false)
                :style {:color "#555555"}}
       [:div.alert.alert-info
        [:div "Hello!"]]] [:br] "Color"]]]]
...