intercooler/www/attributes/ic-deps.html

Making AJAX as easy as anchor tags

---
layout: default
nav: attributes > ic-deps
---

<div class="container">

  <div class="row">
    <div class="col-md-12">

      <h2><code>ic-deps</code> - The Dependencies Attribute</h2>

      <h3>Summary</h3>

      <p>The <code>ic-deps</code> attribute tells Intercooler that an element depends on a given path and should be
        updated if a change to that path is detected.</p>

      <h3>Syntax</h3>

      <p>The value of the <code>ic-deps</code> attribute is a comma-separated list of paths that the element depends on.
      Note that the special single character "*" indicates that an element depends on <strong>all</strong> detected
      changed.</p>

      <p>To disable dependencies on an element, you can use <code>ic-deps="ignore"</code></p>

      <h3>Dependencies</h3>

      <p><code>ic-deps</code> adds the dependencies it specifies to the element it is on.</p>

      <h3>Example</h3>

      <p>Here is a simple element that depends on any changes:</p>

      <pre>
  &lt;button ic-post-to="/path/1">Button 1&lt;/button>
  &lt;button ic-post-to="/path/2">Button 2&lt;/button>
  &lt;div ic-src="/src" ic-deps="*">0 Clicks&lt;/div>
      </pre>


      <div class="live-demo">
        <script>
          (function () {
            var clicks = 0;
            var init = Math.floor(new Date().getTime() / 1000);

            $.mockjax({
              'url': '/src',
              'response': function () {
                this.responseText = clicks + ' Clicks';
              }
            });

            $.mockjax({
              'url': '/path/1',
              'response': function () {
                clicks++;
              }
            });

            $.mockjax({
              'url': '/path/2',
              'response': function () {
                clicks++;
              }
            });

          })();
        </script>
        <button class="btn btn-lg btn-primary" ic-post-to="/path/1">Button 1</button>
        <button class="btn btn-lg btn-primary" ic-post-to="/path/2">Button 2</button>
        <div ic-src="/src" ic-deps="*">0 Clicks</div>
      </div>

    </div>
  </div>
</div>