Scope

We have introduced concept of scope (UI scope) in Atoms.js to emulate UI scope as it exists in other UI frameworks such as flex, silverlight etc. UI scope basically creates boundary and it allows us to identify and reference named properites and named controls that is independent of other scopes. AtomApplication starts with a global scope referred as scope in same scope and as appScope in nested scope.

Usually when you declare a function or variable, it executes in context of current window, JavaScript provides scoping within boundaries of function. However, this scoping has nothing to do with element within which JavaScript is executing. And there is no way to separate variable references in different scope based on its position in the element.

To emulate private scope based on position of script within Html Element and to bind script to specific Element's private scope, Scope scripts were specially designed so that its normal execution does not affect anything, but they are executed in proper scope.

Scope Initialization

To initialize values in scope, an object literal must be written in a scriptlet as shown below, please make sure, that it is surrounded by rounded brackets. This scriptlet does not get executed and it creates no effect while script is parsed by the browser, however Atoms.js recognizes it as a scope initialization and it creates properties in current scope and sets values.

<script type="text/javascript">
   ({
          start: 0,
          size: 20,
          infoCommand: function(){
              alert('Done');
          }
    })
</script>

Above script tag, causes start, size and infoCommand as properties in respective scope. infoCommand is a function, and it can be referenced in same scope.

Scope initialization is defined this way, because this form of script is actually just parsed by javascript, but nothing is executed as it is a valid object literal expression. Since scope is nested, and based on control life cycle, scope will be initialized at its perfect position in UI Hierarchy, this is just stored as reference code to be executed later on.

Scope initialization script nodes are removed from Document while parsing further children. For safety, any JavaScript other than Scope Initialization must only be kept in Document's Head Section.

Scope Control Name

By setting id attribute, HTML element is accessible easily. But when we are dealing with multi item controls such as List, Grid etc, referencing items could be very difficult. Scope helps us in referncing different items in same scope very easily by setting atom-name attribute of the AtomControl. Once you apply atom-name attribute, you can easily refer properties of controls by calling $scope.controlName.propertyName pattern. In binding expression, propertyNames are automatially resolved so you do not have to use Atom.get or Atom.set methods.

AppScope Control Name with ID

Attribute atom-name is used to name the control in current scope, however if you want a control to be available globally even if it is nested inside a local scope, you can assign ID attribute to control, after that you can access $appScope.htmlIDAttribute.propertyName as binding source.