jcreamer898

MVVM and View Models

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:

A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.

A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.

Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either - it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no kno

jcreamer898

var runner = require('thrill').runner,
    Queen = require('queen'),
    queenRunner = require('queen-remote').runner,
    open = require('open'),
    util = require('util');

module.exports = function (grunt) {
    grunt.registerMultiTask('queen-thrill', 'Test front-end code on many browsers', function () {
        var config = this.data,
            done = this.async();

jcreamer898

JavaScript: One language to rule them all

JavaScript while having a long and tedious history is hitting a new stride. Virtually all modern browsers are now closely adhering to the W3C's standards which makes for an exciting time for web developers. Over the course of the next few years there will be more and more projects to work on that are completely concerned with modern browsers which means less time cross-browser testing, and more time actually writing the code!

JavaScript is different from other programming languages in that it runs EVERYWHERE. With node.js now, it even runs on the server. You can right a full stack end to end now with nothing but JavaScript. That's a pretty incredible reality.

The other great part about where we are in the life of JavaScript is that the browser makers are doing a much better job of adhering to the W3C and ECMAscript standards. Therefore many of the new and future JavaScript features are working cross-browser. JavaScript is going

jcreamer898

console.time('addSpans');
$("#editor1 p span").each(function() {
    var $self = $(this),
        newContent = $(this)[0].innerHTML.split(/\s+(?![^<>]*>)/).map(function(word) { return '<span>' + word + '</span>'; }).join(' ');
        
    $self.html(newContent);
});
console.timeEnd('addSpans');

console.time('process');

jcreamer898

How to use this thing...

var MyNewViewModel = ViewModel.extend({
    subscriptions: {},
    publications: {},
    defaults: {
        // ko.observable
        foo: 1,
 // ko.ovservableArrray

jcreamer898

require(['jquery', 'underscore'], function($, _) {
    require.s.contexts._.execCb = function(name, callback, args) {
        return callback.apply({
            $: $,
            _: _
        }, args);
    };
    
    // init app here
});

jcreamer898

//channels
var app = postal.channel( "app" );
var editor = postal.channel( "editor" );
var ui = postal.channel( "ui" );

app.subscribe("ready", function() {

});

// home.done, about.done, ...

jcreamer898

module.exports = function ( grunt ) {

    // Project configuration.
    grunt.initConfig( {
        concat: {
            basic: {
                src: [ 'jsResources/underscore-min.js',
                        'jsResources/product-viewer/lib/core.js',
                        'jsResources/product-viewer/lib/mediaplayer.js',
                        'jsResources/product-viewer/lib/options.js',

jcreamer898

I was thinking that through the use of the require in modulea, I'd be able to get a reference to the app based on what I thought I understood from http://requirejs.org/docs/api.html#circular. But, apparently I am wrong? :) Instead I get Uncaught Error: Module name "app" has not been loaded yet for context: _

jcreamer898

/*
	anvil.compass - Compass plugin for anvil.js
	version: 0.1.1
	author: [object Object]
	copyright: 2012
	license: Dual licensed 
			 MIT (http://www.opensource.org/licenses/mit-license)
			 GPL (http://www.opensource.org/licenses/gpl-license)
*/
var cp = require( "child_process" ),