Helpex - Trao đổi & giúp đỡ Đăng nhập

Xin chào, xương sống và ClojureScript

Hoàng Thanh Sơn
· 02:00 30/10/2012
2 ngày trước

Vài ngày trước tôi đã bắt đầu học ClojureScript . Tôi đã viết một ứng dụng tầm thường thế giới hello hello chỉ để có được ClojureScript để biên dịch và thực thi, và sau đó thêm một số hỗ trợ jQuery cơ bản với jayq .

Đã đến lúc làm cho mọi thứ trở nên thú vị hơn một chút và thêm Backbone.js vào hỗn hợp. Tôi chưa bao giờ thực hiện ClojureScript hoặc Backbone trước đây, vì vậy tôi đang học chúng cùng lúc với một đường cong học tập thú vị.

Dù sao, tôi đã quản lý để viết lại hai ví dụ đầu tiên từ các tài liệu Backbone thành CLJS thuần túy. Tôi đã thực hiện một số sửa đổi nhỏ như kích hoạt các sự kiện khi nhấp vào nút và thay đổi nền chính thay vì thanh bên.

Đây là nguồn trang của tôi (với Hiccup ):

(hp/html5
  [:head]
  [:body
   [:button#clickable-event "Click to trigger an alert from basic Backbone event"]
   [:button#clickable-color "Click to change background color"]
   (hp/include-js
     "http://code.jquery.com/jquery-1.8.2.min.js"
     "http://underscorejs.org/underscore.js"
     "http://backbonejs.org/backbone.js"
     "js/cljs.js")
   ])

Như bạn có thể thấy, nó hiển thị một trang rất cơ bản với hai nút và bao gồm một vài thư viện JS.

Và đây là tệp CLJS trộn jQuery và Backbone:

(ns hello-clojurescript
  (:use [jayq.core :only [$]])
  (:require [jayq.core :as jq]))
 
; ALERT ON CLICK
; Rewrite of http://backbonejs.org/#Events
(def o {})
 
(.extend js/_ o Backbone.Events)
 
(.on o "alert"
  (fn [msg] (js/alert msg)))
 
(jq/bind ($ "#clickable-event") :click
      (fn [e] (.trigger o "alert" "Hello Backbone!")))
 
; MODEL WITH COLOR CHOOSER
; Inspired by http://backbonejs.org/#Model but without sidebar
 
(def MyModel
  (.extend Backbone.Model
    (js-obj
      "promptColor"
      (fn []
        (let [ css-color (js/prompt "Please enter a CSS color:")]
          (this-as this
                   (.set this (js-obj "color" css-color))))))))
 
(def my-model (MyModel.))
 
(.on my-model "change:color"
  (fn [model color]
    (jq/css ($ "body") {:background color})))
 
(jq/bind ($ "#clickable-color") :click
         (fn [e] (.promptColor my-model)))

Có một số điều mới (với tôi) và những cạm bẫy không rõ ràng. Xem bên cạnh này với các bản trình diễn Backbone và lưu ý:

  • Để gọi _.extend (o, Backbone.Events), do (.extend js / _ o Backbone.Events). ClojureScript sẽ chuyển đổi chính xác (.extend js / _ ...) thành _.extend (...) và nó sẽ sao chép Backbone.Events như hiện tại (không cần trích dẫn)
  • Để phân biệt giữa các đối tượng và chức năng được xác định ở nơi khác và trong CLJS, luôn luôn đặt tiền tố trước với js / name. Hoạt động để cảnh báo, gạch dưới, vv
  • Tôi gặp vấn đề với việc truyền trực tiếp các đối tượng (dưới dạng bản đồ) cho các cuộc gọi như Backbone.Model.extend (). Đã thử những thứ như {: promptColor fn} và {"promptColor" fn} không có kết quả. Cuối cùng tôi đã phát hiện ra (js-obj) và nó đã thực hiện được mánh khóe, nhưng nó khá cồng kềnh. Tôi tự hỏi nếu có một cách tốt hơn.
  • Bạn cần một số công việc thêm để sử dụng này. Nó phải được liên kết với biểu tượng Clojure với macro này.
  • Trên một lưu ý hơi liên quan, tôi thực sự bắt đầu yêu jayq. Trong ví dụ này, tôi sử dụng Backbone trần trực tiếp và đấu tranh, và thực sự đánh giá cao jayq thu hẹp khoảng cách với jQuery. Tôi tự hỏi nếu có một trình bao bọc CLJS cho Backbone.

Nói chung, đó là một bài tập thú vị. Chỉ cần đường cong học tập đúng - kích thích, nhưng không làm nản lòng, thường xuyên cung cấp phản hồi rõ ràng.

Như thường lệ, nguồn hoàn chỉnh là tại GitHub . Tôi đã tạo một kho lưu trữ mới cho nó, để giữ cho Hello hello ClojureScript, càng nhỏ càng tốt. Bản demo mới này có thể sẽ phát triển khi tôi tìm hiểu thêm Backbone.

 

 

 

9 hữu ích 0 bình luận 5.7k xem chia sẻ

Có thể bạn quan tâm