动画添加和删除re-frame列表元素的操作,可以通过以下步骤实现:
(ns my-app.db
(:require [re-frame.core :as re-frame]))
(re-frame/reg-sub
:list
(fn [_ _]
(re-frame/dispatch-sync
[:init-list])
[]))
(re-frame/reg-event-db
:init-list
(fn [_ _]
[0 1 2 3 4]))
(re-frame/reg-event-db
:add-to-list
(fn [db [_ k]]
(let [new-list (conj db k)]
[new-list])))
(re-frame/reg-event-db
:remove-from-list
(fn [db [_ idx]]
(let [new-list (vec (remove #(= idx %) (range (count db))))]
(vec (map #(get db %) new-list)))))
(ns my-app.views
(:require [reagent.core :as r]
[re-frame.core :as re-frame]
[my-app.db :as db]))
(defn view-list []
(let [list @(:list (re-frame/subscribe [:list]))]
[:div
[:ul
(map-indexed (fn [i item]
^{:key i}
[:li
item
[:button
{:on-click #(re-frame/dispatch [:remove-from-list i])}
"X"]])
list)]
[:form
{:on-submit #(do (.preventDefault %)
(let [val (.-value (r/dom-node (.-target %)))
k (Integer/parseInt val)]
(when (and (not (nil? k)) (