Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

flexify the API #40

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ browsertest/bundle.js
examples/**/components
examples/**/bower_components
scratchpad.coffee
*.map
22 changes: 22 additions & 0 deletions CHANGELOG.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
## Changelog

### 0.5.0

- remove hard dependency on jQuery (allows you to use ZeptoJS, EnderJS or a similar alternative)
- rename to *bacon-dom*
- allow init() function to be called without $ having been defined
- introduce: Bacon.$.Selector, Bacon.$.Request and Bacon.$.Promise for better customization
- requires `.toJQC(x)` method on JQC (i.e `$` selector)

- Bacon.$.Selector, Bacon.$.Request and Bacon.$.Promise can be set at any time to point to
jQuery compatible APIs (similar to jQuery $)

- Bacon.$.Selector must just point to a function which given a selector string can find an element

- Bacon.$.Request must just point to an object with a jQuery compatible `ajax` method

- Bacon.$.Promise can alternatively be set to any Promise/A+ compatible lib.
It will to use `deferred()` and fall-back to `Deferred()`
It will then use `notify()`, `resolve()` and `reject()` on the deferred

- Changed dom-inputvalue to use API such as `Bacon.$.select.value` and `Bacon.$.radioGroup.intValue`
6 changes: 3 additions & 3 deletions Gruntfile.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ module.exports = (grunt) ->

coffee:
compile:
files: ["dist/bacon.jquery.js": "src/bacon.jquery.coffee"]
files: ["dist/bacon-dom.js": "src/*.coffee"]

uglify:
dist:
src: "dist/bacon.jquery.js"
dest: "dist/bacon.jquery.min.js"
src: "dist/bacon-dom.js"
dest: "dist/bacon-dom.min.js"

grunt.loadNpmTasks "grunt-contrib-coffee"
grunt.loadNpmTasks "grunt-contrib-clean"
Expand Down
34 changes: 34 additions & 0 deletions Gruntfile.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions Gruntfile.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

111 changes: 70 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,37 @@
# bacon.jquery
# bacon-dom

A JQuery data binding library for [Bacon.js](https://github.com/baconjs/bacon.js).
A JQuery compatible (JQC) data binding library for [Bacon.js](https://github.com/baconjs/bacon.js).

Adds stuff to `Bacon.$`. Is also called BJQ.
See fx [Ender.js](http://enderjs.com/#docs) `$._select` which you can use with [qwery](https://github.com/ded/qwery)

```js
$._select = mySelectorEngine
$('#foo .bar')
```

See [example](https://github.com/ded/qwery/blob/master/src/ender.js)

[Zepto.js](http://zeptojs.com/) is another powerful jQuery alternative...

This library adds stuff to `Bacon.$`. It is also called "Baquery" (pronounced like "bakery").

Includes

- Binding the state of HTML input elements to [`Bacon.Model`](https://github.com/baconjs/bacon.model) objects that extend
the Bacon.js `Property` API by providing a bidirectional binding
- AJAX helpers. Wrap a JQuery AJAX call into an EventStream using
- AJAX helpers. Wrap a JQC AJAX call into an EventStream using
`Bacon.$.ajax("/get/stuff")`. Convert an `EventStream` of requests
into an `EventStream` of responses like `requests.ajax()`.
- FRP extensions to JQuery. Wrap JQuery events easily into an `EventStream`, as
- FRP extensions to JQC API. Wrap JQC events easily into an `EventStream`, as
in `$("body").clickE()`

This library is intended as a replacement for [Bacon.UI](https://github.com/raimohanska/Bacon.UI.js). It provides the same functionality, with the addition of two-way bound Models, model composition and lenses.
This library is a replacement for [Bacon.UI](https://github.com/raimohanska/Bacon.UI.js).

It provides the same functionality, with the addition of two-way bound Models, model composition and lenses.

## Example Applications

There are example applications in the [examples](https://github.com/baconjs/bacon.jquery/tree/master/examples) directory, each with a README.md describing how they are started.
There are example applications in the [examples](https://github.com/baconjs/bacon-dom/tree/master/examples) directory, each with a README.md describing how they are started.

Each application does essentially the same thing and the code in the example applications is essentially just this:

Expand All @@ -38,32 +51,51 @@ Each application does essentially the same thing and the code in the example app

## API

The `bacon.jquery` API consists of methods for creating a `Model` representing the
The `bacon-dom` API consists of methods for creating a `Model` representing the
state of a DOM element or a group of DOM elements. This API is published
as `Bacon.$`, and the same object is returned when using AMD or
CommonJS.

Note: The optional initiValue has now been replaced with an (optional) options hash.
Instead of `Bacon.$.textFieldValue(field, '')` use `Bacon.$.textFieldValue(field, {init: ''})`.
This is to allow for more flexibility down the line...

### Plugins


- `ajax`
- `dom-input`
- `effects`
- `events`
- `promise` (deferred)

Use `Bacon.$.plugin('dom-input', 'ajax')` to add the plugins you want to enable.

### DOM Input

`Bacon.$.addPlugin('dom-input')`

###Bacon.$.textFieldValue(field [, initValue])

Creates a `Model` for an
`<input type="text">` element, given as a JQuery object. You can optionally supply an initial value.
`<input type="text">` element, given as a JQC object. You can optionally supply an initial value.

###Bacon.$.checkBoxValue(field [, initValue])

Creates a `Model` for a
`<input type="checkbox">` element, given as a JQuery object. The value is `true` if the checkbox is checked and
`<input type="checkbox">` element, given as a JQC object. The value is `true` if the checkbox is checked and
`false` otherwise.

###Bacon.$.selectValue(field [,initValue])

Creates a `Model` for a `<select>`
element, given as a JQuery object. The value of the model corresponds to the `value` attribute of the selected `<option>` element.
element, given as a JQC object. The value of the model corresponds to the `value` attribute of the selected `<option>` element.

###Bacon.$.radioGroupValue(fields, [,initValue])

Creates a `Model` for a
group of `<input type="radio">` elements, given as a JQuery object or an Array
of jQuery objects. The value of the model corresponds to the `value` attribute
group of `<input type="radio">` elements, given as a JQC object/Array.
The value of the model corresponds to the `value` attribute
of the selected radio input element. Note that `value` is a string.

###Bacon.$.intRadioGroupValue(fields [, initValue])
Expand All @@ -73,17 +105,16 @@ Like `Bacon.$.radioGroupValue`, but for integer values.
###Bacon.$.checkBoxGroupValue(fields, [,initValue])

Creates a `Model` for a group
of `<input type="checkbox">` elements, given as a JQuery object or an Array of
jQuery objects. The value of the model is an array of the `value` attributes of
of `<input type="checkbox">` elements, given as a JQC object/Array . The value of the model is an array of the `value` attributes of
the checked checkbox input elements. For instance, if you have checkboxes and 2
of these are checked, having values `a` and `b`, the value of the Model is
`["a", "b"]`.

TODO: add HTML/JS examples

## FRP extensions to JQuery Events
## FRP extensions to JQC Events

BJQ adds methods to JQuery, for wrapping events into an `EventStream`.
BJQ adds methods to JQC, for wrapping events into an `EventStream`.

For example, to wrap click events on `<body>` into an `EventStream`, you
can
Expand Down Expand Up @@ -123,9 +154,9 @@ Supported methods include the following:
- loadE
- unloadE

## FRP extensions to JQuery Effects
## FRP extensions to JQC Effects

BJQ adds methods to JQuery, for performing animations and wrapping the
BJQ adds methods to JQC, for performing animations and wrapping the
result `Promise` into an `EventStream`. For example

var fadeOut = $("#thing").fadeOutE("fast")
Expand All @@ -146,7 +177,7 @@ Supported methods include the following:

## AJAX

BJQ provides helpers for JQuery AJAX. All the methods return an
BJQ provides helpers for JQC AJAX. All the methods return an
`EventStream` of AJAX results. AJAX errors are mapped into `Error`
events in the stream.

Expand Down Expand Up @@ -196,62 +227,60 @@ Turns your Bacon Ajax stream back to $.Deferred. It's useful if you need to prov

## Model API

All the BJQ methods, such as `textFieldValue` return a `Model` object, which is a Bacon.js `Property`, but extends that API by the following methods.

[Model API reference migrated to bacon.model](https://github.com/baconjs/bacon.model)


TODO: more
All the BJQ methods, such as `textFieldValue` return a `Model` object, which is a Bacon.js `Property`,
but extends that API with [bacon.model](https://github.com/baconjs/bacon.model) methods

## Use with AMD / RequireJS

The [requirejs example-app](https://github.com/baconjs/bacon.jquery/tree/master/examples/requirejs) uses RequireJS, like this:
The [requirejs example-app](https://github.com/baconjs/bacon-dom/tree/master/examples/requirejs) uses RequireJS, like this:

```js
require.config({
paths: {
"bacon.jquery": "../dist/bacon.jquery",
"bacon-dom": "../dist/bacon-dom",
"bacon": "components/bacon/dist/Bacon",
"jquery": "components/jquery/jquery"
}})
require(["bacon.jquery", "jquery"], function(bjq, $) {
require(["bacon-dom", "jquery"], function(bjq, $) {
left = bjq.textFieldValue($("#left"))
right = bjq.textFieldValue($("#right"))
right.bind(left)
right.assign($("#output"), "text")
})
```

The prebuilt javascript file can be found in the `dist` directory, or [here](https://raw.github.com/baconjs/bacon.jquery/master/dist/Bacon.JQuery.Bindings.js).
Note: You can substitute jquery with Zepto or any other compatible library ;)

The prebuilt javascript file can be found in the `dist` directory, or [here](https://raw.github.com/baconjs/bacon-dom/master/dist/bacon-dom.Bindings.js).

The API can be accessed using `Bacon.$` or like in the above example.

## Use without AMD

The [plain example-app](https://github.com/baconjs/bacon.jquery/tree/master/examples/plain) uses RequireJS, like this:
The [plain example-app](https://github.com/baconjs/bacon-dom/tree/master/examples/plain) uses RequireJS, like this:

So feel free to use plain old `<script>` tags to include Bacon, JQuery and BJQ.
So feel free to use plain old `<script>` tags to include Bacon, and JQC lib and BJQ.

The BJQ methods are exposed through `Bacon.$`, so you can call them as in `Bacon.$.textFieldValue(..)`.

The prebuilt javascript file can be found in the `dist` directory, or [here](https://raw.github.com/baconjs/bacon.jquery/master/dist/Bacon.JQuery.Bindings.js).
The prebuilt javascript file can be found in the `dist` directory, or [here](https://raw.github.com/baconjs/bacon-dom/master/dist/bacon-dom.Bindings.js).

There's a [plain example-app](https://github.com/baconjs/bacon.jquery/tree/master/examples/plain) that uses script tags only.
There's a [plain example-app](https://github.com/baconjs/bacon-dom/tree/master/examples/plain) that uses script tags only.

## Use with Node / Browserify

BJQ is registered in the NPM repository as `bacon.jquery` and works fine with [node-browserify](https://github.com/substack/node-browserify).
BJQ is registered in the NPM repository as `bacon-dom` and works fine with [node-browserify](https://github.com/substack/node-browserify).

See the [browserify example-app](https://github.com/baconjs/bacon.jquery/tree/master/examples/browserify) for an example.
See the [browserify example-app](https://github.com/baconjs/bacon-dom/tree/master/examples/browserify) for an example.

## Use with Bower

Registered to the Bower registry as `bacon.jquery`. See the
Example Applications, for instance [requirejs example-app](https://github.com/baconjs/bacon.jquery/tree/master/examples/requirejs).
Registered to the Bower registry as `bacon-dom`. See the
Example Applications, for instance [requirejs example-app](https://github.com/baconjs/bacon-dom/tree/master/examples/requirejs).

## Building

The `bacon.jquery` module is built using NPM and Grunt.
The `bacon-dom` module is built using NPM and Grunt.

To build, use `npm install`.

Expand All @@ -269,11 +298,11 @@ The browser tests can also be run by opening the

The tests are also run automatically on [Travis CI](https://travis-ci.org/). See build status below.

[![Build Status](https://travis-ci.org/baconjs/bacon.jquery.png)](https://travis-ci.org/baconjs/bacon.jquery)
[![Build Status](https://travis-ci.org/baconjs/bacon-dom.png)](https://travis-ci.org/baconjs/bacon-dom)

## What next?

See [Issues](https://github.com/baconjs/bacon.jquery/issues).
See [Issues](https://github.com/baconjs/bacon-dom/issues).

If this seems like a good idea, please tell me so! If you'd like to
contribute, please do! Pull Requests, Issues etc appreciated. Star this project to let me know that you care.
9 changes: 6 additions & 3 deletions RELEASE-NOTES.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
0.4.2 shrink code size (PR #28 by @tco)
0.4.1 don't use Array.prototype.indexOf
0.4.0 extracted bacon.model
## Release notes

- 0.5.0 Remove hard dependency on jQuery and rename to bacon-dom
- 0.4.2 shrink code size (PR #28 by @tco)
- 0.4.1 don't use Array.prototype.indexOf
- 0.4.0 extracted bacon.model
6 changes: 3 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bacon.jquery",
"version": "0.4.11",
"main": "dist/bacon.jquery.js",
"name": "bacon-dom",
"version": "0.5.0",
"main": "dist/bacon-dom.js",
"ignore": ["browsertest", "examples", "src", "test", "./*.*", "build", "release", "run-tests", "version"]
}
Loading