A hotel greeter named Alfred Is there any way of improving this code? (Here's a JSFiddle with an example and comments)

Example: A hotel greeter can greet guests and accepts tips, but it's impossible to see the total of tips a greeter has received. 

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;pre&gt;

            []___  
           /    /\     O &lt;span id="alfred-says"&gt;&lt;!-- the view --&gt;&lt;/span&gt;
          /____/__\   /|\
          |[][]||||   / \
                     ALFRED

        &lt;/pre&gt;
        &lt;button onclick="javascript:alfred('greet')"&gt;Arrive at Hotel&lt;/button&gt;
        &lt;button onclick="javascript:alfred('acceptTip', 10)"&gt;Tip Alfred $10&lt;/button&gt;
        &lt;script&gt;
        var HOTEL, alfred;
        HOTEL = {}; // Namespace
        (function (HOTEL) {
            // Reuseable controller
            var controllerPrototype = {
                greet: function () {
                    this.model.view.innerHTML = '"' + this.model.greeting + '"';
                },
                acceptTip: function (tip) {
                    this.model.tips += tip;
                    this.model.view.innerHTML = '"' + this.model.thankyou + '"';
                }
            };
            // Create a new greeter
            HOTEL.newGreeter = function (view) {
                var controller = Object.create(controllerPrototype);
                controller.facet = function () {
                    var args, method;
                    method = arguments[0];
                    args = 2 &lt;= arguments.length ? [].slice.call(arguments, 1) : [];
                    if (method === "facet" || method === "model" || (controller[method] == null)) {
                        return undefined;
                    }
                    // Model, View and real Controller are never exposed
                    return controller[method].apply(controller, args);
                };
                controller.model = {
                    greeting: "Hello",
                    thankyou: "Thank you",
                    tips: 0,
                    view: view
                };
                return controller.facet;
            };
        }(HOTEL));
        // Alfred only exposes the controller facet. His tips are a secret...
        alfred = HOTEL.newGreeter(document.getElementById("alfred-says"));
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;


Goals: 


Keep it DRY
Keep it MVC
Make sure anyone with access to a "greeter" can never manipulate the view or model directly.


Limitations:


To avoid clutter, avoid type checking to avoid simple errors unless it is necessary to guarantee integrity.


Some specific thoughts: 


Is there a better way of passing model and view into the controller?
Is there a better way of communicating with the controller?
Is there a good way of making a more general view? 
Any other improvements?
From the comments, I guess you would like a theoretical review ;)


This: 

&lt;button onclick="javascript:alfred('greet')"&gt;Arrive at Hotel&lt;/button&gt;
&lt;button onclick="javascript:alfred('acceptTip', 10)"&gt;Tip Alfred $10&lt;/button&gt;


in my mind should be wired by the controller,  that is, the linking of UI elements to data and UI changes
This:

greet: function () {
    this.model.view.innerHTML = '"' + this.model.greeting + '"';
},


has your controller access data straight in your view, updating the DOM. This is wrong in my mind. The view should have functions that the controller can call with either the model as a parameter or already passed in advance.
Object.create(controllerPrototype); &lt;- Any reason you are eschewing new and prototype ? 
Not that it truly matters but, method === "model" will not catch new String('model')
args = [].slice.call(arguments, 1); works as well as the ternary


All in all, I think this could use some more polishing.