कोजरेस्क्रिप्ट ओम: विभिन्न घटकों में स्थानीय राज्य परिवर्तनों को संभालना

Question

मैं एक ओम आधारित फॉर्म का निर्माण कर रहा हूं उपखंडों को या तो ध्वस्त या विस्तारित देखा जा सकता है। दृश्य स्थिति उपखंड स्थानीय राज्य में सहेजा गया है:

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

समस्या प्रत्येक उपखंड देखने कि स्थिति दोनों तरीकों से प्रभावित हो सकते हैं या तो कर रहा है पतन-विस्तार-सभी बटन या प्रत्येक उपधारा के लिए प्रदर्शित एक अलग बटन से ।

आदेश को संभालने के लिए में विस्तार-संपीड़ित-सब वहाँ एक वैश्विक पतन प्रपत्र स्थानीय राज्य में बचाया स्थिति है:

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

जाहिर है दोनों बटन on-click घटनाओं स्थानीय राज्य में पतन स्थिति अपडेट करने के द्वारा नियंत्रित किया जाता है।

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

मेरा प्रश्न है कैसे मुझे पता होना चाहिए जो स्थिति था आदेश सही दृश्य प्रदर्शित करने के लिए पिछले अद्यतन?

या जहां है सही जगह (स्थानीय राज्य या आवेदन राज्य) पतन स्थिति है कि घटक पेड़ के विभिन्न स्तरों में विभिन्न चलाता से प्रभावित हो सकता है को बचाने के लिए?

Answer 1

मैं core.async का प्रशंसक हूं और मैं इसे चैनलों का उपयोग करके लागू कर दूंगा। मेरे पास अनुभागों को संकुचित/विस्तृत संदेश के लिए सुनना होगा और जब यह स्थानीय स्थिति में आता है। स्थानीय राज्य परिवर्तन फिर से आकर्षित करेगा। एक सेक्शन का विस्तार केवल उस अनुभाग के स्थानीय राज्य को अद्यतन करता है।

Answer 2

यदि आप "सही दृश्य प्रदर्शित करने" के लिए समय और कारकता के बारे में सोच रहे हैं तो आप प्रतिक्रिया/ओम के बिंदु गायब हैं। आपको वह निर्णय नहीं लेना चाहिए। आपको बस डिस्प्ले को राज्य के एक टुकड़े से जोड़ना चाहिए और यह सुनिश्चित करना चाहिए कि राज्य का टुकड़ा सही है। जैसा कि कैओस नियमों ने कहा, core.async जाने का रास्ता है।

चूंकि फ़ील्ड घटक पहले से ही बाहरी (सभी बटन पतन) के साथ जोड़े गए हैं, इसलिए मैं केवल फॉर्म के स्थानीय राज्य के अंदर collapsed मॉडल करूंगा/फिर मैं फ़ील्ड में collapse-ch चैनल प्रदान करूंगा ताकि वे वापस संवाद कर सकें जब वे थे क्लिक किया। अंत में मैं उन क्लिक के लिए सुनने के लिए IWillMount में एक ईवेंट हैंडलर स्थापित करेगा:

(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"))))) 

में:

(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))))))) 

क्षेत्रों का सवाल है, वे सिर्फ चैनल पर अपनी सूचकांक डाल करने के लिए जब भी वे क्लिक किया की जरूरत है मामला मुझे कुछ याद आया, पूरा उदाहरण here है। यह बहुत कुछ दिखता है, लेकिन मेरे अनुभव में चिंताओं के ध्वनि को अलग करने का यह सबसे अच्छा तरीका है। tutorial में एक और समान उदाहरण है।