Scopes

The scope you are currently in is always defined by all children beneath the key you are currently writing within.

The key you are currently writing within is defined either by the view you are writing in, or the tag you are writing in.

As an example, given you are writing in the view Home.cshtml which corresponds to the view Home in the Easyweb Studio, you can reach all keys added to that view.

Lets say you add a section with key "hero-items" that contain an image "hero-image" and a textfield "hero-text" and allow multiple input. Next to it you also add a HTML-field with key "about_us". Your structure in the home view would look something like:

Home (view/home.cshtml)

|- hero-items (section/list of items)
 |- hero-text (textfield)
 |- hero-image (image)

|- about-us (html-text)

In the case above, one scope would be defined by the Home root, allowing you to print all keys beneath it. Another scope would be defined by the "hero-items" key, in which you would only have the keys "hero-text" and "hero-image" beneath it available.

Given a view Home.cshtml containing the following, the HTML-comments would describe how the scopes are wrapped:

<!-- By default we exist in the scope of Home -->

<div ew-list="hero-items">
    <!-- Because of the ew-list above, we are now scoped to the hero-items component, and can only reach items within that node -->
    <h2 ew-for="hero-text"></h2>
    <img ew-for-src="hero-image" />

    <!-- Trying to print the about-us key in here like below would not find anything: -->
    <section ew-for="about-us"></section>

    <!-- The scope ends with the tag closing our ew-list -->
</div>

<!-- We are now back in the home-scope and can reach any key under the Home-view again -->
<!-- Printing the about-us key here would find the proper content: -->
<section ew-for="about-us"></section>

Printing content out of scope

There are situations where you need to print content that exists outside of the scope you want to print it within. To achieve that, there are certain keys that allow you to navigate different scope using special keys starting with $:

$parent

The $parent key allows you to climb up one level and search for a key from there. You can combine multiple $parent-keys as well.

Example:

Other examples:

<div ew-list="$parent/$parent/some-list">
    <a ew-for-href="some-key-in-list"></a>
</div>

<ew-template for-key="$parent/some-key" />

$layout and $settings

It is sometimes beneficial to add shared content as field in the Layout- or Settingsview. The settings-content is only available prefixed with the $settings-key, and layout content is, outside of a Layout-view-scope (such as _Layout.cshtml), available using the $layout-key.

Examples:

<p ew-for="$settings/some-key"></p>

<ew-template for-key="$layout/some-key" />

Some other available keys include $Article and $View.