Convert the displaying of output to MVVM master
authorMichael Welch <michaelgwelch@gmail.com>
Sun, 18 Mar 2012 19:51:43 +0000 (14:51 -0500)
committerMichael Welch <michaelgwelch@gmail.com>
Sun, 18 Mar 2012 19:51:43 +0000 (14:51 -0500)
Removed the code that required passing in the output node to the
brainmess object and then to context. Instead a callback function is
passed in that then is invoked whenever the output string changes.

A simple view model with just the output string was added. And
then a simple view for the ouput (bound to the view model) was add
to the html page.

js/context.js
js/form.html
js/main.js

index b325e5d..70d332c 100644 (file)
@@ -1,5 +1,6 @@
-var Context = function(prog, inputNode, output) {
+var Context = function(prog, inputNode, outputCallback) {
     var tape = new Tape();
+    var outputString = "";
     return {
         enableInput: function() { 
             inputNode.disabled=false; 
@@ -24,7 +25,9 @@ var Context = function(prog, inputNode, output) {
             tape.set(charCode);
         },
         output: function() {
-            output(tape.get());
+            // deal with appending strings later.
+            outputString += String.fromCharCode(tape.get());
+            if (outputCallback) outputCallback(outputString);
         }
     };
 }
index d16e7c4..4d0e80c 100644 (file)
@@ -1,6 +1,9 @@
 <html>
 <head>
  <title>Brainmess</title>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type='text/javascript' src="knockout-2.0.0.js"></script>
+
  <script src="main.js"></script>
  <script src="program.js"></script>
  <script src="tape.js"></script>
  <input type="text" id="input" disabled="true"
     onKeyPress="brainmess.resume(event);"></input>
  <br>
- <label>Output</label>
  </form>
 
 
- <pre name="stuf" id="output"></pre>
+ <!-- This is a *view* of the output -->
+ Output: <p data-bind="text: programOutput"></p>
+
+ <!-- This is my viewmodel -->
+
+    <script type="text/javascript">
+        var myViewModel = {
+            programOutput: ko.observable(""),
+        };
+    </script>
+    <script type="text/javascript">
+        ko.applyBindings(myViewModel);
+    </script>
+
 </body>
 </html>
index 705b7e1..c7808c8 100644 (file)
@@ -39,17 +39,9 @@ var Brainmess = function() {
     return {
         // creates a new context based on paramters
         // and starts execution of the program
-        run: function(programText, inputNode, outputNode) {
+        run: function(programText, inputNode, outputCallback) {
             var p = new Program(programText);
-            var outputText = document.createTextNode("");
-            if (outputNode.firstChild) {
-                outputNode.removeChild(outputNode.firstChild);
-            }
-            outputNode.appendChild(outputText);
-            var output = function(char)  {
-                outputText.appendData(String.fromCharCode(char));
-            };
-            context = new Context(p, inputNode, output);
+            context = new Context(p, inputNode, outputCallback);
             execute();
         },
         resume: function(event) {
@@ -64,5 +56,7 @@ var brainmess = new Brainmess();
 function main() {
     brainmess.run(document.getElementById("prog").value, 
         document.getElementById("input"),
-        document.getElementById("output"));
+        function(newText) {
+            myViewModel.programOutput(newText);
+        });
 }