node package manager

can-view-live

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