Views unbinding

This commit is contained in:
Borys Levytskyi
2015-04-03 00:38:50 +03:00
parent e1963fb09c
commit 72f9d0bb4e
4 changed files with 147 additions and 76 deletions

179
.idea/workspace.xml generated
View File

@@ -36,8 +36,8 @@
<file leaf-file-name="controllers.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/app/controllers.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="731">
<caret line="34" column="34" selection-start-line="34" selection-start-column="20" selection-end-line="34" selection-end-column="34" />
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="799">
<caret line="21" column="31" selection-start-line="21" selection-start-column="31" selection-end-line="21" selection-end-column="31" />
<folding />
</state>
</provider>
@@ -53,12 +53,16 @@
</provider>
</entry>
</file>
<file leaf-file-name="index.html" pinned="false" current="true" current-in-tab="true">
<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="0.4178771" vertical-offset="714" max-vertical-offset="1802">
<caret line="64" column="49" selection-start-line="64" selection-start-column="49" selection-end-line="64" selection-end-column="49" />
<folding />
<state vertical-scroll-proportion="9.961538" vertical-offset="446" max-vertical-offset="1428">
<caret line="11" column="0" selection-start-line="11" selection-start-column="0" selection-end-line="11" selection-end-column="0" />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -66,9 +70,12 @@
<file leaf-file-name="bindr.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/components/bindr.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="830" max-vertical-offset="2057">
<caret line="84" column="25" selection-start-line="84" selection-start-column="25" selection-end-line="84" selection-end-column="25" />
<folding />
<state vertical-scroll-proportion="0.0" vertical-offset="983" max-vertical-offset="1972">
<caret line="95" column="24" selection-start-line="95" selection-start-column="24" selection-end-line="95" selection-end-column="24" />
<folding>
<element signature="e#2988#3318#0" expanded="false" />
<element signature="e#3374#3535#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -103,21 +110,21 @@
</provider>
</entry>
</file>
<file leaf-file-name="dispatcher.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/app/dispatcher.js">
<file leaf-file-name="should.js" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/components/should.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="34" max-vertical-offset="289">
<caret line="2" column="0" selection-start-line="2" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="23" column="9" selection-start-line="23" selection-start-column="9" selection-end-line="23" selection-end-column="9" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="styles.css" pinned="false" current="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/css/styles.css">
<file leaf-file-name="dispatcher.js" pinned="false" current="true" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/app/dispatcher.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="119" max-vertical-offset="255">
<caret line="7" column="7" selection-start-line="7" selection-start-column="7" selection-end-line="7" selection-end-column="7" />
<state vertical-scroll-proportion="0.036916394" vertical-offset="0" max-vertical-offset="921">
<caret line="2" column="0" selection-start-line="2" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
<folding />
</state>
</provider>
@@ -168,10 +175,10 @@
<option value="$PROJECT_DIR$/components/commandr.js" />
<option value="$PROJECT_DIR$/app/console.js" />
<option value="$PROJECT_DIR$/app/bootstrap.js" />
<option value="$PROJECT_DIR$/app/controllers.js" />
<option value="$PROJECT_DIR$/components/controlr.js" />
<option value="$PROJECT_DIR$/components/bindr.js" />
<option value="$PROJECT_DIR$/app/app.js" />
<option value="$PROJECT_DIR$/app/controllers.js" />
<option value="$PROJECT_DIR$/components/bindr.js" />
<option value="$PROJECT_DIR$/index.html" />
</list>
</option>
@@ -429,6 +436,7 @@
<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>
@@ -473,6 +481,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="306" max-vertical-offset="493">
<caret line="18" column="6" selection-start-line="18" selection-start-column="6" selection-end-line="18" selection-end-column="6" />
<folding />
</state>
</provider>
</entry>
@@ -502,7 +511,11 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="80" max-vertical-offset="799">
<caret line="33" column="29" selection-start-line="33" selection-start-column="29" selection-end-line="33" selection-end-column="29" />
<folding />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -518,6 +531,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="272" max-vertical-offset="510">
<caret line="16" column="0" selection-start-line="3" selection-start-column="0" selection-end-line="16" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
@@ -547,7 +561,11 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="204" max-vertical-offset="306">
<caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
<folding />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -555,6 +573,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="323" max-vertical-offset="510">
<caret line="19" column="15" selection-start-line="19" selection-start-column="15" selection-end-line="19" selection-end-column="15" />
<folding />
</state>
</provider>
</entry>
@@ -584,7 +603,11 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="102" max-vertical-offset="289">
<caret line="6" column="61" selection-start-line="6" selection-start-column="61" selection-end-line="6" selection-end-column="61" />
<folding />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -592,6 +615,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="323" max-vertical-offset="510">
<caret line="19" column="15" selection-start-line="19" selection-start-column="15" selection-end-line="19" selection-end-column="15" />
<folding />
</state>
</provider>
</entry>
@@ -621,7 +645,11 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="102" max-vertical-offset="289">
<caret line="6" column="61" selection-start-line="6" selection-start-column="61" selection-end-line="6" selection-end-column="61" />
<folding />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -629,6 +657,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="272" max-vertical-offset="510">
<caret line="16" column="7" selection-start-line="16" selection-start-column="7" selection-end-line="16" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
@@ -651,7 +680,11 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="102" max-vertical-offset="289">
<caret line="6" column="61" selection-start-line="6" selection-start-column="61" selection-end-line="6" selection-end-column="61" />
<folding />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -659,6 +692,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="306" max-vertical-offset="510">
<caret line="18" column="0" selection-start-line="18" selection-start-column="0" selection-end-line="18" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
@@ -673,14 +707,11 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="85" max-vertical-offset="289">
<caret line="5" column="61" selection-start-line="5" selection-start-column="61" selection-end-line="5" selection-end-column="61" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/components/should.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="23" column="9" selection-start-line="23" selection-start-column="9" selection-end-line="23" selection-end-column="9" />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
@@ -695,6 +726,7 @@
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="255">
<caret line="3" column="51" selection-start-line="3" selection-start-column="51" selection-end-line="3" selection-end-column="51" />
<folding />
</state>
</provider>
</entry>
@@ -705,14 +737,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/dispatcher.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="289">
<caret line="2" column="0" selection-start-line="2" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<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="255">
@@ -729,14 +753,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/views.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="269" max-vertical-offset="1190">
<caret line="37" column="9" selection-start-line="37" selection-start-column="9" selection-end-line="37" selection-end-column="9" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/components/commandr.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="612">
@@ -745,22 +761,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/controllers.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="731">
<caret line="34" column="34" selection-start-line="34" selection-start-column="20" selection-end-line="34" selection-end-column="34" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/components/bindr.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="830" max-vertical-offset="2057">
<caret line="84" column="25" selection-start-line="84" selection-start-column="25" selection-end-line="84" selection-end-column="25" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/app.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="1258">
@@ -777,10 +777,57 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/components/should.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="578">
<caret line="23" column="9" selection-start-line="23" selection-start-column="9" selection-end-line="23" selection-end-column="9" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/views.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="269" max-vertical-offset="1190">
<caret line="37" column="9" selection-start-line="37" selection-start-column="9" selection-end-line="37" selection-end-column="9" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/controllers.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="0" max-vertical-offset="799">
<caret line="21" column="31" selection-start-line="21" selection-start-column="31" selection-end-line="21" selection-end-column="31" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/components/bindr.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0" vertical-offset="983" max-vertical-offset="1972">
<caret line="95" column="24" selection-start-line="95" selection-start-column="24" selection-end-line="95" selection-end-column="24" />
<folding>
<element signature="e#2988#3318#0" expanded="false" />
<element signature="e#3374#3535#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.4178771" vertical-offset="714" max-vertical-offset="1802">
<caret line="64" column="49" selection-start-line="64" selection-start-column="49" selection-end-line="64" selection-end-column="49" />
<state vertical-scroll-proportion="9.961538" vertical-offset="446" max-vertical-offset="1428">
<caret line="11" column="0" selection-start-line="11" selection-start-column="0" selection-end-line="11" selection-end-column="0" />
<folding>
<element signature="e#2086#2528#0" expanded="false" />
<element signature="e#2603#2787#0" expanded="false" />
<element signature="e#2875#3123#0" expanded="false" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/app/dispatcher.js">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.036916394" vertical-offset="0" max-vertical-offset="921">
<caret line="2" column="0" selection-start-line="2" selection-start-column="0" selection-end-line="2" selection-end-column="0" />
<folding />
</state>
</provider>

View File

@@ -1,6 +1,7 @@
(function(app){
app.controller('expressionInputCtrl', {
bindView: function (viewElement) {
attachView: function (viewElement) {
var dispatcher = app.service('dispatcher');
viewElement.addEventListener('keyup', function (args) {
if (args.keyCode != 13) {
@@ -15,9 +16,12 @@
});
app.service('resultView', {
bindView: function(viewElement) {
attachView: function(viewElement) {
this.viewElement = viewElement;
},
detachView: function() {
this.viewElement == null;
},
clear: function (){
this.viewElement.innerHTML = '';
},

View File

@@ -60,7 +60,7 @@
element.bindr = {}; // will be used later
};
bindr.bindView = function(viewElement, model) {
bindr.attachView = function(viewElement, model) {
var elements = viewElement.querySelectorAll('[data-bindr]'),
count = elements.length,
i =0, el;
@@ -74,21 +74,34 @@
bindr.bindControllers = function (rootViewElement, controllers) {
var elements = rootViewElement.querySelectorAll('[data-controller]'),
i = 0, l = elements.length, name, ctrl;
i = 0, l = elements.length, name, ctrl, attached;
for(;i<l;i++){
name = elements[i].getAttribute('data-controller');
var element = elements[i];
name = element.getAttribute('data-controller');
ctrl = controllers[name];
attached = [];
if(ctrl == null) {
console.warn(nam + ' controller wasn\'t found');
continue;
}
ctrl.bindView(elements[i]);
console.log(name + ' Controller: view bound');
ctrl.attachView(element);
attached.push(ctrl);
console.log(name + ' Controller: view attached');
if(typeof ctrl.detachView != "function") {
continue;
}
element.addEventListener('DOMNodeRemoved', function () {
ctrl.detachView();
console.log(name + ' Controller: view detached');
});
}
}
};
function bindInput(model, intput, propertyName) {
intput.addEventListener('keyup', function(e){

View File

@@ -9,7 +9,6 @@
<script type="text/javascript" src="components/commandr.js"></script>
<script type="text/javascript" src="components/should.js"></script>
<script type="text/javascript" src="components/html.js"></script>
<script type="text/javascript" src="components/controlr.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/bitwise/calc.js"></script>
@@ -27,6 +26,14 @@
<input id="in" type="text" data-controller="expressionInputCtrl"/>
<div id="out" type="text" data-controller="resultViewCtrl"></div>
<div id="victim">
<div data-controller="test">
i'm a victim!
</div>
</div>
<div><button onclick="document.getElementById('victim').innerHTML = ''">Remove Victim</button></div>
<div id="output">
</div>
@@ -64,6 +71,7 @@
{ name: 'help', description: 'Displays help'},
{ name: 'clear', description: 'Clears console'}
];
var helpView = new app.views.HelpView(commands);
resultView.insert(helpView.getViewElement());
@@ -92,7 +100,6 @@
});
app.bootstrap(document.getElementById('rootView'));
})();
</script>