packages/polymer/lib/auto_binding.dart

// Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

library polymer.auto_binding;

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart';

/**
 * The `auto-binding-dart` element extends the template element. It provides a
 * quick and easy way to do data binding without the need to setup a binding
 * delegate or use the [templateBind] call. Both data and event handlers can be
 * bound using the [model].
 *
 * The `auto-binding-dart` element acts just like a template that is bound to
 * a model. It stamps its content in the dom adjacent to itself. When the
 * content is stamped, the `template-bound` event is fired.
 *
 * **NOTE**: It is a good idea to use an id to select these elements. During
 * code transformation it is likely that other template elements will be
 * inserted at the top of the body above yours, so something like
 * querySelector('template') is likely to break when built.
 * See http://dartbug.com/20911.
 *
 * Example:
 *
 *     <template id="my-template" is="auto-binding-dart">
 *       <div>Say something: <input value="{{value}}"></div>
 *       <div>You said: {{value}}</div>
 *       <button on-tap="{{buttonTap}}">Tap me!</button>
 *     </template>
 *     <script type="application/dart">
 *       import 'dart:html';
 *       import 'package:polymer/polymer.dart';
 *
 *       main() {
 *         var template = document.querySelector('#my-template');
 *         template.model = new MyModel();
 *       }
 *
 *       class MyModel {
 *         String value = 'something';
 *         buttonTap() => console.log('tap!');
 *       }
 *     </script>
 *
 */
// Dart note: renamed to avoid conflict with JS auto-binding.
class AutoBindingElement extends TemplateElement with Polymer, Observable
    implements TemplateBindExtension {

  /// Make template_binding "extension methods" friendly.
  /// Note that [NodeBindExtension] is already implemented by [Polymer].
  TemplateBindExtension _self;

  get model => _self.model;
  set model(value) {
    _self.model = value;
  }

  BindingDelegate get bindingDelegate => _self.bindingDelegate;
  set bindingDelegate(BindingDelegate value) {
    _self.bindingDelegate = value;
  }

  void clear() => _self.clear();

  @override
  PolymerExpressions get syntax => bindingDelegate;

  AutoBindingElement.created() : super.created() {
    polymerCreated();

    _self = templateBindFallback(this);

    bindingDelegate = makeSyntax();

    // delay stamping until polymer-ready so that auto-binding is not
    // required to load last.
    Polymer.onReady.then((_) {
      attributes['bind'] = '';
      // we don't bother with an explicit signal here, we could ust a MO
      // if necessary
      async((_) {
        // note: this will marshall *all* the elements in the parentNode
        // rather than just stamped ones. We'd need to use createInstance
        // to fix this or something else fancier.
        marshalNodeReferences(parentNode);
        // template stamping is asynchronous so stamping isn't complete
        // by polymer-ready; fire an event so users can use stamped elements
        fire('template-bound');
      });
    });
  }

  PolymerExpressions makeSyntax() => new _AutoBindingSyntax(this);

  DocumentFragment createInstance([model, BindingDelegate delegate]) =>
      _self.createInstance(model, delegate);

  @override
  dispatchMethod(obj, method, args) {
    // Dart note: make sure we dispatch to the model, not ourselves.
    if (identical(obj, this)) obj = model;
    return super.dispatchMethod(obj, method, args);
  }
}

// Dart note: this is implemented a little differently to keep it in classic
// OOP style. Instead of monkeypatching findController, override it.
class _AutoBindingSyntax extends PolymerExpressions {
  final AutoBindingElement _node;
  _AutoBindingSyntax(this._node) : super();
  @override findController(_) => _node;
}