databinding and commands

This commit is contained in:
Borys Levytskyi
2015-04-02 21:56:59 +03:00
parent a628050e9c
commit cfa948f6b0
6 changed files with 367 additions and 107 deletions

262
.idea/workspace.xml generated
View File

@@ -23,41 +23,41 @@
</component>
<component name="FileEditorManager">
<leaf>
<file leaf-file-name="views.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/views.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="833">
<caret line="41" column="5" selection-start-line="41" selection-start-column="5" selection-end-line="41" selection-end-column="5" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="expressionInputCtrl.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/expressionInputCtrl.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="476">
<caret line="1" column="36" selection-start-line="1" selection-start-column="36" selection-end-line="1" selection-end-column="36" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="formatter.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/components/formatter.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="68" max-vertical-offset="578">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="4" column="0" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="expression.js" pinned="false" current="false" current-in-tab="false">
<file leaf-file-name="expression.js" pinned="false" current="true" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/js/components/expression.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="136" max-vertical-offset="425">
<caret line="8" column="0" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="views.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/views.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="156" max-vertical-offset="833">
<caret line="38" column="0" selection-start-line="38" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="styles.css" pinned="false" current="true" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/css/styles.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="609">
<caret line="0" column="59" selection-start-line="0" selection-start-column="59" selection-end-line="0" selection-end-column="59" />
<state vertical-scroll-proportion="0.07383279" vertical-offset="0" max-vertical-offset="921">
<caret line="4" column="33" selection-start-line="4" selection-start-column="33" selection-end-line="4" selection-end-column="33" />
<folding />
</state>
</provider>
@@ -66,8 +66,18 @@
<file leaf-file-name="index.html" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="-21.115385" vertical-offset="165" max-vertical-offset="816">
<caret line="42" column="7" selection-start-line="42" selection-start-column="7" selection-end-line="42" selection-end-column="7" />
<state vertical-scroll-proportion="-22.0" vertical-offset="227" max-vertical-offset="1224">
<caret line="47" column="30" selection-start-line="47" selection-start-column="30" selection-end-line="47" selection-end-column="30" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="bindr.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/components/bindr.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="1547">
<caret line="71" column="0" selection-start-line="71" selection-start-column="0" selection-end-line="71" selection-end-column="0" />
<folding />
</state>
</provider>
@@ -76,23 +86,13 @@
<file leaf-file-name="html.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/components/html.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="18" max-vertical-offset="867">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="867">
<caret line="13" column="12" selection-start-line="13" selection-start-column="12" selection-end-line="13" selection-end-column="12" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="core.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/components/core.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="calc.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/components/calc.js">
<provider selected="true" editor-type-id="text-editor">
@@ -103,11 +103,21 @@
</provider>
</entry>
</file>
<file leaf-file-name="core.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/components/core.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="app.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/app.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="153" max-vertical-offset="510">
<caret line="9" column="30" selection-start-line="9" selection-start-column="30" selection-end-line="9" selection-end-column="30" />
<state vertical-scroll-proportion="0.0" vertical-offset="218" max-vertical-offset="1139">
<caret line="41" column="6" selection-start-line="41" selection-start-column="6" selection-end-line="41" selection-end-column="6" />
<folding />
</state>
</provider>
@@ -138,18 +148,24 @@
<option value="$PROJECT_DIR$/app/core.js" />
<option value="$PROJECT_DIR$/app/expressionView.js" />
<option value="$PROJECT_DIR$/app/html.js" />
<option value="$PROJECT_DIR$/index.html" />
<option value="$PROJECT_DIR$/js/views.js" />
<option value="$PROJECT_DIR$/js/components/html.js" />
<option value="$PROJECT_DIR$/css/styles.css" />
<option value="$PROJECT_DIR$/js/components/inputView.js" />
<option value="$PROJECT_DIR$/js/app.js" />
<option value="$PROJECT_DIR$/js/components/expressionInputCtrl.js" />
<option value="$PROJECT_DIR$/js/expressionInputCtrl.js" />
<option value="$PROJECT_DIR$/js/components/bindr.js" />
<option value="$PROJECT_DIR$/index.html" />
<option value="$PROJECT_DIR$/js/components/expression.js" />
</list>
</option>
</component>
<component name="ProjectFrameBounds">
<option name="x" value="-8" />
<option name="y" value="-8" />
<option name="width" value="1382" />
<option name="height" value="744" />
<option name="width" value="1936" />
<option name="height" value="1056" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="false">
<OptionsSetting value="true" id="Add" />
@@ -252,7 +268,11 @@
<property name="FullScreen" value="false" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\BitwiseCalc\js\components" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\BitwiseCalc\js" />
<recent name="C:\Projects\BitwiseCalc\js\components" />
<recent name="C:\Projects\BitwiseCalc\app" />
<recent name="C:\Projects\BitwiseCalc" />
@@ -315,15 +335,14 @@
<servers />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="-8" width="1382" height="744" extended-state="6" />
<editor active="false" />
<frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
<editor active="true" />
<layout>
<window_info id="Changes" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.32913387" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.3499268" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.34947917" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
@@ -331,6 +350,7 @@
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.3284055" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="SLIDING" type="SLIDING" visible="false" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
@@ -354,9 +374,59 @@
</option>
</component>
<component name="XDebuggerManager">
<breakpoint-manager />
<breakpoint-manager>
<option name="time" value="1" />
</breakpoint-manager>
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/js/app.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="561" max-vertical-offset="731">
<caret line="33" column="0" selection-start-line="33" selection-start-column="0" selection-end-line="33" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="165" max-vertical-offset="816">
<caret line="42" column="7" selection-start-line="42" selection-start-column="7" selection-end-line="42" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/html.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="18" max-vertical-offset="867">
<caret line="13" column="12" selection-start-line="13" selection-start-column="12" selection-end-line="13" selection-end-column="12" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/core.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="442" max-vertical-offset="578">
<caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/calc.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="238" max-vertical-offset="493">
<caret line="14" column="13" selection-start-line="14" selection-start-column="13" selection-end-line="14" selection-end-column="13" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/app.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="153" max-vertical-offset="510">
<caret line="9" column="30" selection-start-line="9" selection-start-column="30" selection-end-line="9" selection-end-column="30" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/formatter.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
@@ -629,42 +699,10 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/app.js">
<entry file="file://$PROJECT_DIR$/css/styles.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="510">
<caret line="9" column="30" selection-start-line="9" selection-start-column="30" selection-end-line="9" selection-end-column="30" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/formatter.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="4" column="0" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/expression.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="425">
<caret line="8" column="0" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/core.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="-21.115385" vertical-offset="165" max-vertical-offset="816">
<caret line="42" column="7" selection-start-line="42" selection-start-column="7" selection-end-line="42" selection-end-column="7" />
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="153">
<caret line="3" column="24" selection-start-line="3" selection-start-column="24" selection-end-line="3" selection-end-column="24" />
<folding />
</state>
</provider>
@@ -679,24 +717,72 @@
</entry>
<entry file="file://$PROJECT_DIR$/js/views.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="156" max-vertical-offset="833">
<caret line="38" column="0" selection-start-line="38" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="425">
<caret line="41" column="5" selection-start-line="41" selection-start-column="5" selection-end-line="41" selection-end-column="5" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/bindr.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="1547">
<caret line="71" column="0" selection-start-line="71" selection-start-column="0" selection-end-line="71" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/core.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="26" column="0" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/html.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="18" max-vertical-offset="867">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="867">
<caret line="13" column="12" selection-start-line="13" selection-start-column="12" selection-end-line="13" selection-end-column="12" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/css/styles.css">
<entry file="file://$PROJECT_DIR$/js/app.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="609">
<caret line="0" column="59" selection-start-line="0" selection-start-column="59" selection-end-line="0" selection-end-column="59" />
<state vertical-scroll-proportion="0.0" vertical-offset="218" max-vertical-offset="1139">
<caret line="41" column="6" selection-start-line="41" selection-start-column="6" selection-end-line="41" selection-end-column="6" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/formatter.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="4" column="0" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/expressionInputCtrl.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="476">
<caret line="1" column="36" selection-start-line="1" selection-start-column="36" selection-end-line="1" selection-end-column="36" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="-22.0" vertical-offset="227" max-vertical-offset="1224">
<caret line="47" column="30" selection-start-line="47" selection-start-column="30" selection-end-line="47" selection-end-column="30" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/components/expression.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.07383279" vertical-offset="0" max-vertical-offset="921">
<caret line="4" column="33" selection-start-line="4" selection-start-column="33" selection-end-line="4" selection-end-column="33" />
<folding />
</state>
</provider>

View File

@@ -5,19 +5,22 @@
<title></title>
<script type="text/javascript" src="js/components/bindr.js"></script>
<script type="text/javascript" src="js/components/core.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/components/html.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/components/calc.js"></script>
<script type="text/javascript" src="js/components/expression.js"></script>
<script type="text/javascript" src="js/components/formatter.js"></script>
<script type="text/javascript" src="js/views.js"></script>
<script type="text/javascript" src="js/expressionInputCtrl.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<input id="in" type="text"/>
<div id="out" type="text"></div>
<div id="output">
@@ -25,17 +28,38 @@
<script type="text/javascript">
$(function(){
(function(){
var app = window.app;
var expr = app.service('expression').parse("1&32")
console.log('expression', expr);
var bindr = window.bindr;
var expression = app.service('expression');
var expressionInputCtrl = app.controller('expressionInputCtrl');
var outputDiv = document.getElementById('output');
var model = bindr.model({'expression': ''});
var view = new window.app.views.ExpressionView(expr);
bindr.bindElement(model, document.getElementById('in'), 'expression');
bindr.bindElement(model, document.getElementById('out'), 'expression');
var html = view.getHtml();
console.log(html);
$('#output').append(html);
});
expressionInputCtrl.bind(document.getElementById('in'), model);
app.command('calculateExpression').subscribe(function() {
var expr = expression.parse(model.expression);
if(expr == null) {
alert('incorrect expression');
return;
}
var view = new window.app.views.ExpressionView(expr);
var result = document.createElement('div');
result.innerHTML = view.getHtml();
outputDiv.appendChild(result);
model.expression = '';
});
})();
</script>

View File

@@ -1,25 +1,62 @@
(function (should) {
(function (should, bindr) {
var app = {};
app.views = {};
var services = {};
var servicesContainer = {};
var controllersContainer = {};
var events = {};
app.service = function(name, impl) {
function resolveOrInject(name, inst, container, entityName) {
var resolved;
should.beString(name);
if(impl != null) {
services[name] = impl;
console.log(name + " service registered");
return impl;
if (inst != null) {
container[name] = inst;
console.log(name + " " + entityName + " registered");
resolved = inst;
}
else {
resolved = container[name];
should.check(resolved != null, name + " " + entityName + " wasn't found");
}
var svc = services[name];
should.check(svc != null, name + " service wasn't found");
return svc;
return resolved;
}
app.service = function(name, inst) {
return resolveOrInject(name, inst, servicesContainer, "service");
};
app.controller = function(name, inst) {
return resolveOrInject(name, inst, controllersContainer, "controller");
};
app.command = function(name) {
var evt = events[name];
if(evt == null) {
evt = events[name] = new Command(name);
}
return evt;
};
window.app = app;
function Command(name) {
this.name = name;
this.handlers = [];
}
Command.prototype.fire = function (arg) {
for(var i=0; i<1; i++) {
this.handlers[i](arg);
}
};
Command.prototype.subscribe = function (handler) {
this.handlers.push(handler);
// TODO: unsubcribe
}
})(window.should);

86
js/components/bindr.js Normal file
View File

@@ -0,0 +1,86 @@
(function(){
var bindr = {};
bindr.model = function(definition){
var model = new bindr.Model();
for(var property in definition){
if(!definition.hasOwnProperty(property)){
continue;
}
Object.defineProperty(model, property, {
get:bindr.Model.createGetter(property),
set:bindr.Model.createSetter(property)
});
model[property] = definition[property];
}
return model;
};
bindr.Model = function() {
this.handlers = [];
};
bindr.Model.createGetter = function (propertyName){
return function(){
return this["_" + propertyName];
}
};
bindr.Model.createSetter = function(propertyName){
return function(value){
this["_" + propertyName] = value;
this.notifyPropertyChanged(propertyName, value);
}
};
bindr.Model.prototype.observe = function (handler){
this.handlers.push(handler);
};
bindr.Model.prototype.notifyPropertyChanged = function(propertyName, value){
this.handlers.forEach(function(h){
h(propertyName, value);
});
};
bindr.bindElement = function(model, element, propertyName) {
if(element.bindr != null) {
return;
}
if(element.tagName == "INPUT") {
bindInput(model, element, propertyName);
}
else {
bindHtmlElement(model, element, propertyName);
}
element.bindr = {}; // will be used later
};
function bindInput(model, intput, propertyName) {
intput.addEventListener('keyup', function(e){
model[propertyName] = e.srcElement.value;
});
model.observe(function(property, value){
if(window.event && window.event.srcElement == intput) {
return;
}
intput.value = value;
});
}
function bindHtmlElement(model, el, propertyName) {
model.observe(function(propery, value){
if(propery == propertyName) {
el.innerHTML = value;
}
});
}
window.bindr = bindr;
})();

View File

@@ -4,7 +4,12 @@
app.service('expression', {
parse: function(string) {
var matches = twoOperandsRegex.exec(string);
if(matches == null) {
return null;
}
console.log(matches);
return {
string:matches[0],
operand1: parseInt(matches[1], 10),

22
js/expressionInputCtrl.js Normal file
View File

@@ -0,0 +1,22 @@
(function(){
function subscribeEvents(element) {
element.addEventListener('keyup', function(args) {
if(args.keyCode == 13) {
// Enter
app.command('calculateExpression').fire();
}
console.log(args)
});
}
app.controller('expressionInputCtrl', {
bind: function (element) {
subscribeEvents(element);
}
});
})(window.app);