View live binding utilities
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
lib
test
.editorconfig
.gitignore
.jshintrc
.npmignore
.travis.yml
build.js
can-view-live.js
package.json
readme.md

readme.md

can-view-live

Build Status

API

can-view-live {Object}

Setup live-binding between the DOM and a compute manually.

Object

live.html(el, compute, [parentNode])

live.html is used to setup incremental live-binding on a block of html.

// a compute that change's it's list
var greeting = compute(function(){
  return "Welcome <i>"+me.attr("name")+"</i>"
});

var placeholder = document.createTextNode(" ");
$("#greeting").append(placeholder);

live.html(placeholder, greeting);
  1. el {HTMLElement}: An html element to replace with the live-section.

  2. compute {can.compute}: A [can.compute] whose value is HTML.

  3. parentNode {HTMLElement}: An overwritable parentNode if el's parent is a documentFragment.

live.list(el, list, render, context, [parentNode])

Live binds a compute's list incrementally.

// a compute that change's it's list
var todos = compute(function(){
  return new Todo.List({page: can.route.attr("page")})
})

var placeholder = document.createTextNode(" ");
$("ul#todos").append(placeholder);

can.view.live.list(
  placeholder,
  todos,
  function(todo, index){
    return "<li>"+todo.attr("name")+"</li>"
  });
  1. el {HTMLElement}: An html element to replace with the live-section.

  2. list {can-compute|can-list|can-define/list/list}: An observable list type.

  3. render {function(index, index)}: A function that when called with the incremental item to render and the index of the item in the list.

  4. context {Object}: The this the render function will be called with.

  5. parentNode {HTMLElement}: An overwritable parentNode if el's parent is a documentFragment.

live.text(el, compute, [parentNode], [nodeList])

Replaces one element with some content while keeping [can-view-live.nodeLists nodeLists] data correct.

live.attr(el, attributeName, compute)

Keep an attribute live to a [can-compute].

var div = document.createElement('div');
var compute = canCompute("foo bar");
live.attr(div,"class", compute);
  1. el {HTMLElement}: The element whos attribute will be kept live.
  2. attributeName {String}: The attribute name.
  3. compute {can-compute}: The compute.

Contributing

Making a Build

To make a build of the distributables into dist/ in the cloned repository run

npm install
node build

Running the tests

Tests can run in the browser by opening a webserver and visiting the test.html page. Automated tests that run the tests from the command line in Firefox can be run with

npm test