app.js

var views = {
  foo: function($el, el, props) {
    console.log(props);
  },
  bar: function($el, el, props) {
    console.log(props);
  },
  fooBar: function($el, el, props) {
    console.log(props);
  }
};
viewloader.execute(views);

// -> "bar"
// -> {"bar": "baz"}
// -> {"bar": "foo"} 
// -> {"fooBar": true}

viewloader.js

(function(root, factory) {
  root.viewloader = factory({},(root.jQuery || root.Zepto || root.$)); // Browser global
}(this, function(viewloader,$) {
  "use strict";
  var re = new RegExp('([a-z])([A-Z])', 'g'),
      dasherize = function(s) {
        return s.replace(re, '$1-$2').toLowerCase();
      };
  viewloader.execute = function(views, $scope) {
    for(var view in views) {
      var dashView = dasherize(view),
        selector = "[data-view-" + dashView + "]",
      $els = $scope ? $scope.find(selector) : $(selector);
      $els.each(function(i, el) {
        var $el = $(el);
        views[view]($el, el, $el.data("view-" + dashView));
      });
    };
  };
  return viewloader;
}));

views-to-load.html

<div data-view-foo="bar" data-view-bar='{"bar":"baz"}'/>
<div data-view-bar='{"bar":"foo"}'/>
<div data-view-foo-bar='{"fooBar":true}'/>