Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize
You are here: Home  >  Apps  >  JS API and JSON Demos

    Simple Example with the JS-API & Tokens

    The JS API allows you to use 2SexyContent data in your JavaScript with minimal plumbing. Here's how it works:

    1. Enable / disable publishing of data (this is done in the template settings, default is disabled for security reasons)
    2. A client side JS-API which takes care of all the data x-fer and ensures that the client receives a clean representation of the data as a JS-object
    3. The client-side API has a syntax and functionality very close to that of the Razor-API

    Download the App to experiment with this yourself.

    First FAQ Example (uses AngularJS)

      This one has about 6 questions. We're using the ModuleID-Token to ensure that our JS works, even if included more than once.
      1. {{ item.Question }}

      Second list - works without conflict

        This just shows how it works that the scripts use unique IDs to put their results in.
        1. {{ item.Question }}

          Examples with many different Technologies

          The following examples do the same thing, with 5 different technologies

          1. Token Templates
          2. Razor Templates
          3. jQuery Templates
          4. knockoutJS Templates
          5. AngularJS Templates

          FAQ using Server-Side Token binding

            This is the simplest example, no JS whatsoever. It just serves as a reference. 

            FAQ Using Server-Side Razor Binding

            This is another simple example - still using server-side binding. In this case it uses Razor. 

            • Does this also work with razor?
              Of course - it's even more powerfull. But we're sticking to simple examples here.
            • Does this also work with razor?
              Of course - it's even more powerfull. But we're sticking to simple examples here.
            • Does this also work with razor?
              Of course - it's even more powerfull. But we're sticking to simple examples here.

            Example using jQuery-binding only

              This is a simple FAQ sample using JavaScript to visualize it. So this is a jQuery only example, without any special MVC or data binding frameworks. 

              knockoutJS example

                This example uses knockoutJS. it's a simple data-binding javascript-library. Not as powerfull as AngularJS, but also a bit simpler. But if you're serious about getting into JS or even SPA (single page application) development, you'll have to go directly to AngularJS. 


                Example using AngularJS

                  This example uses AngularJS for the data binding. 

                  1. {{ item.Question }}
                  2serve . 2invent . 2create is 2be.