Justin Meyer justinbmeyer

Error in user YAML: (<unknown>): could not find expected ':' while scanning a simple key at line 5 column 1

--- 
title: Weekly Widget 7 - Computes and Sliders
tags: open-source canjs
author: justinbmeyer
lead: Learn why can.compute is the last API you will ever need as we explore using it
in a slider.
layout: post
---

Computes are amazing, especially when

title	tags	author	lead	layout
Weekly Widget 4 - Chat	open-source can.Model Socket.io	fara82	Sending and receiving messages using Socket.io and can.Model.	post

This week's widget is a real-time chat application that demonstrates sending and receiving messages using Socket.io and can.Model. This article shows how to integrate Socket.io to can.Model's events system.

Before learning JavaScript, it's important to learn how it fits into the larger picture of the Browser and DOM (and your web app).

To start, lets walk through a very basic "Hello World" web page. Assume that the server at helloworld.com has this HTML file:

<html>
  <head>
    <script type='text/javascript'>
      alert('Hello JS');

3.2's $.Controller - Templated Event Binding Goodness

JavaScriptMVC 3.2 brings a lot of great features and enhancements. So many features that changes to $.Controller didn't make the cut for our upcoming 3.2 article. This article reviews 3.2's $.Controller and talks about templated event binding (something we neglected to write up for 3.1).

Bind and Memory Leaks

Neglecting to unbind event handlers is the easiest way to create memory leaks. This is extremely common in an MVC architecture as you constantly listen for model changes:

Task.bind('created', function(ev, newTask){

// add task to list

3.2's $.Controller - Templated Event Binding Goodness

JavaScriptMVC 3.2 brings a lot of great features and enhancements. So many features that changes to $.Controller didn't make the cut for our upcoming 3.2 article. This article reviews 3.2's $.Controller and talks about templated event binding (something we neglected to write up for 3.1).

Bind and Memory Leaks

Neglecting to unbind event handlers is the easiest way to create memory leaks. This is extremely common in an MVC architecture as you constantly listen for model changes:

Task.bind('created', function(ev, newTask){

// add task to list

	<p>In this guide, you will learn how to create a custom video player using the <code><video></code> element and <a href="http://canjs.com">CanJS</a>. The
	custom video player will:</p>
	<ul>
	<li>Have custom play and pause buttons.</li>
	<li>Show the current time and duration of the video.</li>
	<li>Have a <code><input type="range"></code> slider that can adjust the position of the video.</li>
	</ul>
	<p>The final player looks like:</p>
	<div class="cp_embed_wrapper"><iframe id="cp_embed_qyRqMx" src="//codepen.io/justinbmeyer/embed/qyRqMx?height=350&theme-id=dark&slug-hash=qyRqMx&default-tab=js%2Cresult&user=justinbmeyer&embed-version=2&pen-title=CanJS%205.0%20Video%20Player%20-%20Final" scrolling="no" frameborder="0" height="350" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" name="CodePen Embed" title="CanJS 5.0 Video Player - Final" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
	<p>The following sections are broken dow

	(function(privateThings){

	function Private() {
	this.data = 'is private';
	}

	Private.prototype.somePrivateFunction = function() {
	this.foo = 'bar';
	};

	<article class="content docs">
	<section class='title'>
	<div class='pullright'>
	<ul class='tags'><li>function</li><li>static</li></ul>
	<ul class='links'>
	<li><a>source</a></li>
	<li><a>download</a></li>
	<li><a>tests</a></li>
	</ul>
	</div>

	<article class="content docs">
	<section class='title'>
	<div class='pullright'>
	<ul class='tags'><li>function</li><li>static</li></ul>
	<ul class='links'>
	<li><a>source</a></li>
	<li><a>download</a></li>
	<li><a>tests</a></li>
	</ul>
	</div>