Code Monkey home page Code Monkey logo

bacon.ui.js's Introduction

Note: I'm not maintaining this library any more. Please try the bacon-jquery-bindings library instead!

Some helpers for constructing jQuery UIs with Bacon.js. This is stuff that I've extracted from more specific codebases and that's too UI-specific to qualify for inclusion in Bacon.js.

Bacon.UI.textFieldValue(textfield)

Returns the value of a textfield (jQuery object) as a Property. Currently bound to keyups, input, cut, paste.

var username = Bacon.UI.textFieldValue($("#username"))

Bacon.UI.optionValue(optionField, initValue)

Returns the value of an option field (jQuery object) as a Property.

Optionally, you can define initValue, which will set it as the initial value of the underlying <select> HTML element.

Example usage:

Given HTML like this:

<select id="doneness-level">
  <option value="raw">Raw doneness level</option>
  <option value="medium">Medium doneness level</option>
</select>

You can do like this:

var baconRoastingLevel = Bacon.UI.optionValue(
  $('#doneness-level'),
  'medium' // Set the select element initially to value "medium"
)

Bacon.UI.checkBoxGroupValue(checkBoxes, initValue)

Returns the value of a checkbox group (jQuery object representing multiple checkboxes) as a Property. The value will be an array containing the values of selected checkboxes. The optional initValue param can be used to set the initial state.

Now suppose you have three checkboxes for selecting the media for customer contacts:

<input type="checkbox" value="email"/>
<input type="checkbox" value="sms"/>
<input type="checkbox" value="snailmail"/>

To set up a property containing selected media, with "sms" initially selected:

var selectedMedia = Bacon.UI.checkBoxGroupValue($("input"), ["sms"])

Bacon.EventStream.ajax(fn)

Performs an AJAX request on each event of your stream, collating results in the result stream.

The source stream is expected to provide the parameters for the AJAX call.

var usernameRequest = username.map(function(un) { return { type: "get", url: "/usernameavailable/" + un } })
var usernameAvailable = username.changes().ajax()

Install

You can download the latest generated javascript.

..or you can use script tags to include this file directly from Github:

<script src="https://raw.github.com/raimohanska/Bacon.UI.js/master/Bacon.UI.js"></script>

If you're targeting to node.js, you can

npm install baconui

For bower users:

bower install bacon-ui

Running tests

On command-line interface

  1. Install http://phantomjs.org/
  2. ./run-tests.sh

On browser

  1. Install http://phantomjs.org/
  2. python -m SimpleHTTPServer 9999
  3. go to http://localhost:9999/test/runner.html

Running tests on Travis-ci.org

It can be done. Are you the one to do this?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.