标签: om

我将成为David Nolen的Om库的粉丝.

我想在我们的团队中构建一个不太大的Web应用程序,但我无法说服我的队友切换到ClojureScript.

有没有办法可以使用om中使用的原则但是在JavaScript中构建应用程序？

我想的是:

1. 不可变数据结构的immutable-js或mori
2. CSP的js-csp
3. 只是app-state原子的普通javascript对象
4. 游标的immutable-js
5. 用于跟踪app-state和发送游标通知的东西

我正在努力争取上面的第5名.

有没有人冒险进入这个领域或有任何建议？也许有人尝试使用immutable-js构建react.js应用程序？

我已经阅读了David Nolen的基本Om教程,但我仍然对应用程序状态和组件本地状态之间的区别感到困惑.当提到游标时,它也指的是其中一个或两个？

我已经看过使用Om进行富客户端网站设计.这也是我第一次使用core.async.阅读教程https://github.com/swannodette/om/wiki/Basic-Tutorial我已经看到使用core.async通道来处理删除操作(而不是在处理程序中完成所有工作).我的印象是,仅使用该通道进行删除是因为删除回调是在一个范围内声明的,在该范围内,您有一个项目级别的光标,您实际上想要操纵包含该项目的列表.

为了更深入地了解渠道,我看到了Rich Hickey的讲座http://www.infoq.com/presentations/clojure-core-async,他解释了如何利用渠道从事件回调中获取应用程序逻辑.这让我想知道教程中删除通道的实际目的是否显示构建应用程序的方式.如果是这样,

• 什么是与该模式相关的最佳实践？

• 是否应该为各种活动创建个人频道？即如果我添加一个控制器来创建一个新事件,我是否还会为对象创建创建一个新的通道,然后用于将对象添加到应用程序中另一个位置的全局状态？

• 让我们说我有一个项目列表,一个项目有一个详细/简洁的状态标志.如果detailed?是true,将显示更多的信息,如果detailed?是false它会显示较少的信息.我关联了一个在om/transact!游标上使用的点击事件(作为全局状态对象中列表项的视图).

(let [toggle-detail-handler 
      (fn [e]
        (om/transact! (get-in myitem [:state])
                      #(conj % {:detailed? (not (:detailed? %))})))]
  (html [:li {:on-click toggle-detail-handler}
         "..." ])) 

我意识到这可能是一个非常简洁的代码片段,其中使用渠道为手段,以分离从acutal逻辑变化的回调事件的整体利益呢起初似乎不值得,但更复杂的例子总体效益大于这个.但另一方面,为这种细节引入额外的通道 - 不详细的切换似乎也为源代码增加了相当大的负载.

如果你能对整个设计问题给出一些提示/提示或其他想法并将它们放到透视中,那就太好了.我觉得那里有点失落.

我一直在寻找如何在Om中创建动画,我尝试创建一个成功的RaphaelJs组件.我得到了我想要的动画,但由于某种原因,Om渲染了SVG元素的多个实例.

望着在庵github上文件夹的动画例如使用setInterval改变要进行动画处理,这是不太理想的值.

我知道CSSTransitionGroup插件,但看起来你只能在CSS中定义的预设动画之间切换,你不能决定做一些像渲染路径和跟随随机时序的形状.如果您可以使用它动态定义动画,请随时纠正我.

有没有人有任何表演简单动画的好例子？只是翻译或旋转简单的形状会让我知道如何从那里开始处理它.

我有一些带有反应组件抽象的外部UI,我想从试剂中重用它们,有没有办法直接渲染预定义的反应组件,只需从clojurescript传递数据.我是一个clojurescript初学者.

我有自己的方法如何使用React并构建我自己的框架,受Om的启发.我正在实现一些类似于Flux架构的东西,其中的商店可以在某些事件上自行更新.

我不确定理解为什么在Flux架构中我们需要存储依赖性？

对于给定的有界环境,商店不应该是自包含数据持有者,就像我们使用CQRS架构一样？

在一个事件系统中,2个CQRS组件最终可能保留相同的数据.我们是否表达商店依赖关系以避免在商店中存储重复数据？

有人可以提出一些非常具体的用例,其中需要存储依赖关系并且问题难以以任何其他方式解决吗？我找不到任何自己.

我正在阅读这个OM教程但是我不清楚何时使用OM组件与普通函数(特别是om /组件宏).

该教程写道:

第一个参数是一个函数,它接受应用程序状态数据和后备React组件,这里称为owner.此函数必须返回Om组件 - 即om/IRender接口的模型,如om.core/component宏生成

; here the function (fn [app owner]) indeed returns an OM component
(om/root
  (fn [app owner]
    (om/component (dom/h2 nil (:text app))))
  app-state
  {:target (. js/document (getElementById "app"))})

在下一节中,我们找到以下列表的呈现循环示例:

 ; this one does not return an om component (or does it?). it returns a virtual dom
(om/root
  (fn [app owner]
    (apply dom/ul nil
      (map (fn [text] (dom/li nil text)) (:list app))))
  app-state
  {:target (. js/document (getElementById "app0"))})

在这里,我们基本上只是直接返回一个(虚拟)dom,而不是包含在OM组件中,所以问题是:为什么om/component宏存在？宏只是帮助我们验证IRender功能,但看起来我们也可以只使用普通函数.我会介绍具有生命周期状态的OM组件(或者需要所有者调用get-props)但是对于只需要创建虚拟dom的组件我宁愿选择简单的函数(所以我不需要构建/构建 - 创建我的虚拟dom的所有功能).我在这里错过了什么？为什么宏仍然有用(我没有看到它).

这就是我所拥有的:

(defn view [cursor owner]
  (reify
    om/IDidMount
    (did-mount [_]
      (-> (js/$ ".dropdown-toggle")
          (.dropdown)))

    om/IRender
    (render [_]
      (dom/div #js {:className "dropdown"}
               (dom/button #js {:className "btn btn-default dropdown-toggle"
                                :type "button"
                                :id "dropdownMenu1"} "Dropdown" (dom/span #js {:className "caret"}))
               (dom/ul #js {:className "dropdown-menu"
                            :role "menu"
                            :ariaLabelledby "dropdownMenu1"}
                       (dom/li #js {:role "presentation"}
                               (dom/a #js {:role "menuitem"
                                           :tabIndex "-1"
                                           :href "#"} "Action"))
                       (dom/li #js {:role "presentation"}
                               (dom/a #js {:role "menuitem"
                                           :tabIndex "-1"
                                           :href "#"} "Another action")))))))

问题是,一旦打开下拉列表,它就不再隐藏了,因为当它点击它或其他地方时应该是这样.击键也不起作用.我相信这里缺少一些重要的东西,它会是什么？我正在使用bootstrap 3.1.1和jquery 1.11.0.

谢谢.

我已经开发了Om/React组件,但是我觉得不能用单元测试来驱动我的开发.我试图设置我的clojurescript项目来对这些组件运行单元测试,到目前为止我已经达到了能够编写单元测试并实例化我的组件的程度.我缺少的是能够确保我的组件对某些事件做出正确反应,例如,onChange以便我可以模拟用户输入.

这是我的测试代码:

(defn simulate-click-event
  "From https://github.com/levand/domina/blob/master/test/cljs/domina/test.cljs"
  [el]
  (let [document (.-document js/window)]
    (cond
     (.-click el) (.click el)
     (.-createEvent document) (let [e (.createEvent document "MouseEvents")]
                                (.initMouseEvent e "click" true true
                                                 js/window 0 0 0 0 0
                                                 false false false false 0 nil)
                                (.dispatchEvent el e))
     :default (throw "Unable to simulate click event"))))

(defn simulate-change-event
  "From https://github.com/levand/domina/blob/master/test/cljs/domina/test.cljs"
  [el]
  (let [document (.-document js/window)]
    (cond
     (.-onChange el) (do (print "firing on change on "  el) (.onChange el))
     (.-createEvent document) (let [e (.createEvent document …

我刚开始使用Om(基于reactjs的ClojureScript库).我想根据用户输入过滤列表.以下工作,但解决方案似乎是复杂的.还有更好的吗？

(ns om-tut.core
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [clojure.string :as string]))

(enable-console-print!)

(def app-state (atom {:list ["Lion" "Zebra" "Buffalo" "Antelope"]}))

(defn handle-change [e owner {:keys [text]}]
  (om/set-state! owner :data (vec (filter (fn [x] (> (.indexOf x(.. e -target -value)) -1)) (@app_state :list))))
  (om/set-state! owner :text (.. e -target -value)))


(defn list-view [app owner]
  (reify
    om/IInitState
    (init-state [_]
      {:text nil
       :data (:list app)
       })
    om/IRenderState
    (render-state [this state]    
      (dom/div nil
        (apply …