rolaveric

class MyController {
  // ... snip
  addTodoClicked() {
    // Calls 'todos.add()' with the formModel
    this.model.call(['todos', 'add'], [this.formModel])
      .subscribe(_ => this.$scope.$evalAsync());
    
    // Clear the form  
    this.formModel = {};
  }

rolaveric

<dl>
  <dt>Title</dt>
  <dd>{{:: ctrl.viewValue('titlesById[0].title')}}</dd>
  <dt>Description</dt>
  <dd><input type="text" ng-model="ctrl.getterSetter('titlesById[0].description')" ng-model-options="{getterSetter: true}"/></dd>
</dl>

rolaveric

class MyController {
  // ... snip
  getterSetter(path) {
    // Need to return an unbound function
    var ctrl = this;
    return function (newValue) {
      // If arguments.length === 1 then the function is used as a setter,
      // otherwise it's a getter
      return arguments.length
        // setValue() returns an Observable.

rolaveric

<ul>
  <li ng-repeat="index in ctrl.viewValue('titlesById.length') | pageRange:ctrl.page:ctrl.pageSize">
    <dl>
      <dt>Title</dt>
      <dd>{{:: ctrl.viewValue('titlesById[' + index + '].title')}}</dd>
      <dt>Description</dt>
      <dd>{{:: ctrl.viewValue('titlesById[' + index + '].description')}}</dd>
    </dl>
  </li>
</ul>

rolaveric

function pageRangeFilterProvider() {
  return function pageRangeFilter(itemCount, currentPage, pageSize) {
    itemCount = itemCount || 0; // The 'length' of the collection
    currentPage = currentPage || 1; // The current page number being viewed
    pageSize = pageSize || 5; // The size of each page
    const range = [];
    for (var x = (currentPage - 1) * pageSize; x < currentPage * pageSize && x < itemCount; x++) {
      range.push(x);
    }
    return range;

rolaveric

<dl>
  <dt>Title</dt>
  <dd>{{:: ctrl.viewValue('titlesById[0].title')}}</dd>
  <dt>Description</dt>
  <dd>{{:: ctrl.viewValue('titlesById[0].description')}}</dd>
</dl>

rolaveric

class MyController {
  // ... snip
  viewValue(path) {
    // getCache() returns a JSON fragment, so we need to parse the path
    const value = this.$parse(path)(this.model.getCache(path));
    if (typeof value !== 'undefined') {
      return typeof value === 'object' ? value.value : value;
    }
    
    // Cache miss - request the real value

rolaveric

// snip ...

class MyController {
  // snip...
  getValue() {
    this.model.getValue('titlesById[523].name')
      .subscribe(value => {
        this.value = value;
        this.$scope.$evalAsync();
      });

rolaveric

import angular from 'angular';
import falcor from 'falcor';
import HttpDataSource from 'falcor-http-datasource';

class MyController {
  constructor() {
    this.model = new falcor.Model({
        source: new HttpDataSource('/model.json')
      }).batch(); // Batches value requests together
  }

rolaveric

{
  todosById: {
    "44": {
      name: "get milk from corner store",
      done: false,
      prerequisites: [{ $type: "ref", value: ["todosById", 54] }]
    },
    "54": {
      name: "withdraw money from ATM",
      done: false,