(defn ^:export main []
  (let [app (app/build count-app)
        render-fn (push/renderer "content" [[:value [:route] route-changed]])]
    (render/consume-app-model app render-fn)
    (configure-router (:input app) "first")
    (app/begin app)))

Это решение вряд ли можно использовать повторно, но оно также очень гибкое. В любой момент мы можем решить сделать что-то конкретное при переключении местоположения — изменить что-либо в модели данных или приложения, сделать запрос к серверу и т. Д.

Я бы не советовал, это всего лишь первая попытка решить проблему.

Попытка 2: общая

Совершенно очевидно, что приведенное решение может быть обобщено. Один из способов сделать это — обобщить рендер. Мы можем инициализировать его с помощью некоторой конфигурации, сообщающей, какое действие выполнить для каждого пути. Например, что-то вроде этого:

(defn render-route [msg]
  (let [container (dom/by-id "view-container")]
    (dom/destroy-children! container)
    (dom/append! container (str "<p>" msg "</p>"))))
 
(defn route-first []
  (render-route "This is the first route"))
 
(defn route-second []
  (render-route "This is the second route"))
 
(def router-config
  {:routes {"first" route-first
            "second" route-second}
   :default-route "first"
   :listener (fn [old-value new-value]
               (.log js/console "Routing from" old-value "to" new-value))})

Здесь происходит не так много интересного, но, безусловно, его можно использовать повторно.

Рендерер теперь инициализируется с помощью этой конфигурации, например:

(defn route-renderer [cfg]
  (fn [_ [_ _ old-value new-value] input-queue]
    (when-let [listener (:listener cfg)]
      (listener old-value new-value))
    (if-let [dispatcher (get-in cfg [:routes new-value])]
      (dispatcher)
      (.log js/console "Unknown route:" new-value))))

Я опущу слушателя истории и главное для ясности, но я надеюсь, что суть ясна. Опять же, код на Github под genericтегом.

Все, что делает это решение — привязывает вызов функции к каждому пути. Я мог бы легко извлечь его в крошечную общую библиотеку. Я также мог бы сделать его более мощным — например, использовать «функции конструктора» более высокого порядка, которые позволяют каждому действию получить доступ к состоянию или отправить в очередь ввода. Я мог бы использовать шаблоны. И так далее.

Попытка 3: общая — легкая

Завершая это, я нашел еще один способ сделать это. Помните, что оба вышеупомянутых решения используют весь стек Pedestal — прослушиватель истории отправляет сообщение во входную очередь, и нам нужен преобразователь и эмиттер, чтобы передать его рендереру. Может быть, мне не нужно привлекать «нижние слои» к навигации и рендерингу?

Я понял, что могу просто включить рендеринг в самом слушателе истории:

(defn route-first [input-queue]
  (render-route "This is the first route"))
 
(defn route-second [input-queue]
  (render-route "This is the second route"))
 
(def router-config
  {:routes {"first" route-first
            "second" route-second}
   :default-route "first"
   :listener (fn [new-value]
               (.log js/console "Routing to" new-value))})
 
(defn route-changed [{:keys [input]} route-config]
  (fn [e]
    (let [token (.-token e)
          token (if (= "" token) (:default-route route-config) token)]
      (when-let [listener (:listener cfg)]
        (listener token))
      (if-let [dispatcher (get-in route-config [:routes token])]
        (dispatcher input)
        (.log js/console "Unknown route:" token)))))
 
(defn configure-router
  ([app route-config]
    (doto (goog.History.)
      (goog.events/listen
        (goog.object/getValues goog.history/EventType)
        (route-changed app route-config))
      (.setEnabled true))))
 
(defn ^:export main []
  (let [app (app/build)]
    (configure-router app router-config)
    (app/begin app)))

Вот и все. Ему даже не нужен пьедестал. Маршрутизатор — это общая мелочь, основанная только на Google Closure. Однако в этом случае каждое действие также имеет доступ к входной очереди, и совершенно очевидно, как вы могли бы выставлять любые другие вещи из Pedestal. Вы по-прежнему можете отправлять сообщения в Pedestal, устанавливать средства визуализации и т. Д., Но это больше не требуется для самой маршрутизации.

Завершение

В конце концов, я вполне доволен последним решением. Ну, в некотором смысле — это все еще требует от меня тонны ручной работы! Не для самой маршрутизации, а для рендеринга DOM. Это похоже на jQuery, с кучей утомительных ручных манипуляций с DOM.

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

Тем не менее, все время я сталкиваюсь с трениями — если я позволю Angular делать слишком много, у меня не будет никакой пользы от пьедестала. С другой стороны, существует некоторое несоответствие импеданса между угловой «ориентированной моделью» и дифференциальными толчками Пьедестала. Если я когда-нибудь сделаю какие-то вменяемые выводы на этот счет, я напишу это. Но это другая история.