Merge pull request YahooArchive#180 from zhouyaoji/view_engine_ex_src

View engine ex src

docs/dev_guide/code_exs/views.rst

@@ -10,4 +10,4 @@ These examples show you how to create view templates, use Mustache tags, and pas
    views_multiple_devices 
    htmlframe_view
    scroll_views
-
+   view_engines

examples/developer-guide/adding_view_engines/addons/view-engines/hb.server.js

@@ -0,0 +1,34 @@
+YUI.add('addons-viewengine-hb', function(Y, NAME) {
+
+  var hb = require('handlebars'),
+  fs = require('fs');
+  function HbAdapter(viewId) {
+    this.viewId = viewId;
+  }
+  HbAdapter.prototype = {
+
+    render: function(data, mojitType, tmpl, adapter, meta, more) {
+      var me = this,
+      handleRender = function(output) {
+
+                output.addListener('data', function(c) {
+                  adapter.flush(c, meta);
+                });
+                output.addListener('end', function() {
+                  if (!more) {
+                    adapter.done('', meta);
+                  }
+                });
+              };
+              Y.log('Rendering template "' + tmpl + '"', 'mojito', NAME);
+              var template = hb.compile(this.compiler(tmpl));
+              var result = template(data);
+              console.log(result);
+              adapter.done(result,meta);
+            },
+            compiler: function(tmpl) {
+              return fs.readFileSync(tmpl, 'utf8');
+            }
+          };
+          Y.namespace('mojito.addons.viewEngines').hb = HbAdapter;
+}, '0.1.0', {requires: []});

examples/developer-guide/adding_view_engines/application.json

@@ -0,0 +1,10 @@
+[
+  {
+    "settings": [ "master" ],
+    "specs": {
+      "myMojit": {
+        "type": "myMojit"
+      }
+    }
+  }
+]

examples/developer-guide/adding_view_engines/index.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2011-2012, Yahoo! Inc.  All rights reserved.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+
+/*jslint anon:true, sloppy:true, nomen:true, node:true*/
+
+
+process.chdir(__dirname);
+
+
+/**
+ * @param {object} config The configuration object containing processing params.
+ * @param {object} token Token used to identify the application.
+ */
+module.exports = function(config, token) {
+    var app = require('./server.js');
+
+    // Signal the application is ready, providing the token and app references.
+    process.emit('application-ready', token, app);
+};

examples/developer-guide/adding_view_engines/mojits/myMojit/assets/index.css

@@ -0,0 +1,2 @@
+dt { font-weight: bold; }
+.sel { background-color: #FF4; }

examples/developer-guide/adding_view_engines/mojits/myMojit/binders/index.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2012 Yahoo! Inc. All rights reserved.
+ */
+/*jslint anon:true, sloppy:true, nomen:true*/
+YUI.add('myMojitBinderIndex', function(Y, NAME) {
+
+/**
+ * The myMojitBinderIndex module.
+ *
+ * @module myMojitBinderIndex
+ */
+
+    /**
+     * Constructor for the myMojitBinderIndex class.
+     *
+     * @class myMojitBinderIndex
+     * @constructor
+     */
+    Y.namespace('mojito.binders')[NAME] = {
+
+        /**
+         * Binder initialization method, invoked after all binders on the page
+         * have been constructed.
+         */
+        init: function(mojitProxy) {
+            this.mojitProxy = mojitProxy;
+        },
+
+        /**
+         * The binder method, invoked to allow the mojit to attach DOM event
+         * handlers.
+         *
+         * @param node {Node} The DOM node to which this mojit is attached.
+         */
+        bind: function(node) {
+            var me = this;
+            this.node = node;
+            node.all('dt').on('mouseenter', function(evt) {
+                var dd = '#dd_' + evt.target.get('text');
+                me.node.one(dd).addClass('sel');
+            });
+            node.all('dt').on('mouseleave', function(evt) {
+                var dd = '#dd_' + evt.target.get('text');
+                me.node.one(dd).removeClass('sel');
+            });
+        }
+
+    };
+
+}, '0.0.1', {requires: ['event-mouseenter', 'mojito-client']});

examples/developer-guide/adding_view_engines/mojits/myMojit/controller.server.js

@@ -0,0 +1,32 @@
+YUI.add('myMojit', function(Y, NAME) {
+
+  Y.mojito.controllers[NAME] = {
+
+    init: function(config) {
+      this.config = config;
+    },
+    index: function(ac) {
+      ac.done("Mojito is working.");
+    },
+    default_ve: function(ac) {
+      ac.done({
+        "title": "Mustache at work!",
+        "view_engines": [
+          { "name": "Handlebars"},
+          {"name": "EJS"},
+          {"name": "Jade"},
+          {"name": "dust"},
+          {"name": "underscore" }
+        ],
+        "ul": { "title": 'Here are some of the other available rendering engines:' },
+      });
+    },
+    added_ve: function(ac) {
+      ac.done({
+        "title": "Handlebars at work!",
+        "view_engines": [ "Mustache","EJS","Jade", "dust","underscore" ],
+        "ul": { "title": 'Here are some of the other available rendering engines:' }
+      });
+    }
+  };
+}, '0.0.1', {requires: ['mojito', 'myMojitModelFoo']});

examples/developer-guide/adding_view_engines/mojits/myMojit/definition.json

@@ -0,0 +1,5 @@
+[
+    {
+        "settings": [ "master" ]
+    }
+]

examples/developer-guide/adding_view_engines/mojits/myMojit/models/foo.server.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2012 Yahoo! Inc. All rights reserved.
+ */
+/*jslint anon:true, sloppy:true, nomen:true*/
+YUI.add('myMojitModelFoo', function(Y, NAME) {
+
+/**
+ * The myMojitModelFoo module.
+ *
+ * @module myMojit
+ */
+
+    /**
+     * Constructor for the myMojitModelFoo class.
+     *
+     * @class myMojitModelFoo
+     * @constructor
+     */
+    Y.mojito.models[NAME] = {
+
+        init: function(config) {
+            this.config = config;
+        },
+
+        /**
+         * Method that will be invoked by the mojit controller to obtain data.
+         *
+         * @param callback {function(err,data)} The callback function to call when the
+         *        data has been retrieved.
+         */
+        getData: function(callback) {
+            callback(null, { some: 'data' });
+        }
+
+    };
+
+}, '0.0.1', {requires: []});

examples/developer-guide/adding_view_engines/mojits/myMojit/tests/binders/index.common-tests.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2012 Yahoo! Inc. All rights reserved.
+ */
+YUI.add('myMojitBinderIndex-tests', function(Y, NAME) {
+
+    var suite = new YUITest.TestSuite(NAME),
+        binder,
+        A = YUITest.Assert;
+
+    suite.add(new YUITest.TestCase({
+
+        name: 'myMojit index binder tests',
+
+        setUp: function() {
+            binder = Y.mojito.binders.myMojitBinderIndex;
+        },
+        tearDown: function() {
+            binder = null;
+        },
+
+        'TODO: test update id': function() {
+            var node = Y.Node.create("<div id='guid123'></div>");
+            binder.init({
+                _guid: 'guid123'
+            });
+            binder.bind(node);
+
+            // there is nothing to test in the binder initially
+            A.skip();
+
+        }
+
+    }));
+
+    YUITest.TestRunner.add(suite);
+
+}, '0.0.1', {requires: ['mojito-test', 'node', 'myMojitBinderIndex']});

examples/developer-guide/adding_view_engines/mojits/myMojit/tests/controller.server-tests.js

@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2012 Yahoo! Inc. All rights reserved.
+ */
+
+YUI.add('myMojit-tests', function(Y) {
+
+    var suite = new YUITest.TestSuite('myMojit-tests'),
+        controller = null,
+        A = YUITest.Assert;
+
+    suite.add(new YUITest.TestCase({
+
+        name: 'myMojit user tests',
+
+        setUp: function() {
+            controller = Y.mojito.controllers.myMojit;
+        },
+        tearDown: function() {
+            controller = null;
+        },
+        'test mojit': function() {
+           var ac,
+                doneResults;
+            ac = {
+                done: function(data) {
+                    doneResults = data;
+                }
+            };
+            A.isNotNull(controller);
+            A.isFunction(controller.index);
+            A.isFunction(controller.default_ve);
+            A.isFunction(controller.added_ve);
+        },        
+        'test index': function() {
+            var ac,
+                doneResults;
+            ac = {
+                done: function(data) {
+                    doneResults = data;
+                }
+            };
+            controller.index(ac);
+            A.isString(doneResults);
+            A.areSame('Mojito is working.', doneResults);
+        },
+        'test default_ve': function() {
+            var ac,
+                doneResults;
+            ac = {
+                done: function(data) {
+                    doneResults = data;
+                }
+            };
+            controller.default_ve(ac);
+            A.isObject(doneResults);
+            var test_data = { 
+              "title": "Mustache at work!",
+              "view_engines": [
+                {"name": "Handlebars"},
+                {"name": "EJS"},
+                {"name": "Jade"},
+                {"name": "dust"},
+                {"name": "underscore" }
+              ],
+              "ul": { "title": 'Here are some of the other available rendering engines:' }
+             };
+             A.areSame(test_data.title,doneResults.title);
+             A.areSame(test_data.view_engines.length,doneResults.view_engines.length);
+             var arr_size = test_data.view_engines.length;
+             for(var i=0;i<arr_size;i++){
+               A.areSame(test_data.view_engines[i].name,doneResults.view_engines[i].name);
+             }
+            // A.areSame(test_data.ul.title,doneResults.ul.title);
+         },
+         'test added_ve': function() {
+            var ac,
+                doneResults;
+            ac = {
+                done: function(data) {
+                    doneResults = data;
+                }
+            }; 
+            controller.added_ve(ac);
+            var test_data =  {
+             "title": "Handlebars at work!",
+             "view_engines": [ "Mustache","EJS","Jade", "dust","underscore" ],
+             "ul": { "title": 'Here are some of the other available rendering engines:' }
+            };
+            A.isObject(doneResults);
+            A.areSame(test_data.title,doneResults.title);
+            A.areSame(test_data.view_engines.length,doneResults.view_engines.length);
+            var arr_size = test_data.view_engines.length;
+            for(var i=0;i<arr_size;i++){
+               A.areSame(test_data.view_engines[i],doneResults.view_engines[i]);
+            }
+            A.areSame(test_data.ul.title,doneResults.ul.title);
+          }
+    }));
+    YUITest.TestRunner.add(suite);
+
+}, '0.0.1', {requires: ['mojito-test', 'myMojit','json-stringify']});

examples/developer-guide/adding_view_engines/mojits/myMojit/tests/models/foo.server-tests.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2012 Yahoo! Inc. All rights reserved.
+ */
+
+YUI.add('myMojitModelFoo-tests', function(Y, NAME) {
+
+    var suite = new YUITest.TestSuite(NAME),
+        model = null,
+        A = YUITest.Assert;
+
+    suite.add(new YUITest.TestCase({
+
+        name: 'myMojitModelFoo user tests',
+
+        setUp: function() {
+            model = Y.mojito.models.myMojitModelFoo;
+        },
+        tearDown: function() {
+            model = null;
+        },
+
+        'test mojit model': function() {
+            var called = false;
+            A.isNotNull(model);
+            A.isFunction(model.getData);
+            model.getData(function(err, data) {
+                called = true;
+                A.isTrue(!err);
+                A.isObject(data);
+                A.areSame('data', data.some);
+            });
+            A.isTrue(called);
+        }
+
+    }));
+
+    YUITest.TestRunner.add(suite);
+
+}, '0.0.1', {requires: ['mojito-test', 'myMojitModelFoo']});

examples/developer-guide/adding_view_engines/mojits/myMojit/views/added_ve.hb.html

@@ -0,0 +1,11 @@
+<h2>{{title}}</h2>
+<div id="{{mojit_view_id}}">
+{{#with ul}}
+  <h3>{{title}}</h3>
+{{/with}}
+  <ul>
+  {{#each view_engines}}
+    <li>{{this}}</li>
+  {{/each}}
+  </ul>
+</div>