Presentation: building a Single Page App

campaigns-table.html

<table class="table table-hover">
    <thead>
        <tr>
            <th>Campaign name</th>
            <th>Number of points before redeem</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: campaigns">
        <tr>
            <td data-bind="text: description, click: $parent.showDetails"></td>
            <td data-bind="text: numberOfPointsBeforeRedeem"></td>
        </tr>
    </tbody>
</table>

details.html

<form>
    <label>Description</label>
    <input type="text" data-bind="value: description"/>

    <label>Number of points before redeem</label>
    <input data-bind="value: numberOfPointsBeforeRedeem" type="text" />
    
    <br/>

    <button class="btn btn-primary" type="submit" data-bind="click: $parent.save">Save</button>
    <button class="btn" type="submit" data-bind="click: $parent.cancel">Cancel</button>
</form>

fetchFromCache.js

if (forceRemote)
    query = query.using(breeze.FetchStrategy.FromServer);
else
    query = query.using(breeze.FetchStrategy.FromLocalCache);

get-campaigns.js

function getCampaigns() {
  var query = breeze.EntityQuery.from('Campaigns').orderBy('description');
 
  return mgr.executeQuery(query);
}

getCampaignById.js

function getCampaignById(id) {
  return mgr.fetchEntityByKey('Campaign', id, true);
}

init.js

function init() {
  return mgr.fetchMetadata();
}

showDetails.js

function showDetails(campaign) {
  router.navigateTo('#details/' + campaign.id());
}

Single Page App Presentation.js

breeze.NamingConvention.camelCase.setAsDefault();
 
var mgr = new breeze.EntityManager('http://qrcampaign.azurewebsites.net/api/subscriptions');