Om cojurescript: xử lý các thay đổi trạng thái cục bộ trong các thành phần khác nhau

Question

Tôi đang tạo biểu mẫu dựa trên om là các phần phụ có thể được xem hoặc bị thu gọn hoặc mở rộng. Tình trạng xem được lưu trong phần phụ nhà nước địa phương:

 
(defn subsection-view [subsection owner] 
    (reify 
    om/IInitState 
    (init-state [this] 
     {:collapsed true})) 

Vấn đề là mỗi phần phụ xem trạng thái có thể được thực hiện cả hai cách, hoặc bằng sự sụp đổ-mở rộng-tất cả các nút hoặc bằng một nút riêng biệt hiển thị cho mỗi tiểu mục .

Để xử lý mở rộng-nén-tất cả ở đó là một tình trạng sụp đổ toàn cầu lưu trong tình trạng hình thức địa phương:

 
(defn form-view [data owner] 
    (reify 
    om/IInitState 
    (init-state [this] 
     {:all-collapsed true}))) 

Rõ ràng cả hai nút on-click sự kiện được xử lý bằng cách cập nhật tình trạng sụp đổ trong tình trạng địa phương.

 
(om/update-state! owner :collapsed not) 

Câu hỏi của tôi là làm thế nào tôi nên biết được tình trạng bị cập nhật lần cuối để hiển thị xem đúng không?

Hoặc ở đâu là đúng nơi (trạng thái địa phương hoặc trạng thái ứng dụng) để lưu trạng thái thu gọn có thể được thực hiện từ các trình kích hoạt khác nhau ở các cấp khác nhau của cây thành phần?

Answer 1

Tôi là người hâm mộ của core.async và tôi sẽ triển khai nó bằng cách sử dụng kênh. Tôi sẽ có các Phần lắng nghe một Thông báo Thu gọn/Mở rộng và khi nó thay đổi trạng thái cục bộ. Thay đổi trạng thái địa phương sẽ gây ra một sự rút lại. Việc mở rộng một Phần duy nhất chỉ cập nhật trạng thái cục bộ của phần đó.

Answer 2

Nếu bạn đang nghĩ về thời gian và quan hệ nhân quả để "hiển thị chế độ xem phù hợp", bạn đang thiếu điểm React/Om. Bạn không nên đưa ra quyết định đó. Bạn chỉ nên liên kết màn hình với một phần của trạng thái và đảm bảo rằng phần của trạng thái là đúng. Như Chaos Rules nói, core.async là con đường để đi.

Vì các thành phần trường đã được ghép với thứ gì đó bên ngoài (nút thu gọn tất cả) tôi chỉ mô hình collapsed bên trong trạng thái cục bộ của biểu mẫu/Sau đó tôi sẽ cung cấp kênh collapse-ch cho các trường để chúng có thể liên lạc lại khi chúng đã nhấp. Cuối cùng tôi xin thiết lập một event handler trong IWillMount để lắng nghe cho các nhấp chuột:

(def init-state [true true true]) 

(defn form-view [data owner] 
    (reify 
    om/IInitState 
    (init-state [_] 
     {:collapsed init-state 
     :collapse-ch (chan)}) 
    om/IWillMount 
    (will-mount [_] 
     (let [collapse-ch (om/get-state owner :collapse-ch)] 
     (go (loop [] 
       (let [index (<! collapse-ch)] 
       (om/update-state! owner [:collapsed index] not)) 
       (recur))))) 
    om/IRenderState 
    (render-state [_ {:keys [collapsed collapse-ch]}] 
     (dom/div nil 
       (dom/button 
       #js {:onClick (fn [_] 
           (om/set-state! owner :collapsed init-state))} 
       "Collapse All") 
       (apply dom/div nil 
         (map #(om/build field-view {:collapsed? %1} 
             {:init-state {:index %2 
                :collapse-ch collapse-ch}}) 
          collapsed 
          (range))))))) 

Đối với các lĩnh vực, họ chỉ cần đưa chỉ số của họ trên kênh bất cứ khi nào họ được nhấp:

(defn field-view [data owner] 
    (reify 
    om/IRenderState 
    (render-state [_ {:keys [index collapse-ch]}] 
     (dom/button #js {:onClick (fn [_] 
            (go (>! collapse-ch index)))} 
        (if (:collapsed? data) 
        "Collapsed" 
        "Showing"))))) 

Trong trường hợp tôi bị mất một cái gì đó, ví dụ đầy đủ là here. Nó trông giống như rất nhiều, nhưng theo kinh nghiệm của tôi, đó là cách tốt nhất để đạt được một sự phân chia âm thanh của mối quan tâm. Có một ví dụ tương tự khác trong số tutorial.