Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've created a JSFiddle where you can play around with bindings, see <a href="http://jsfiddle.net/hVGwV/" rel="nofollow">http://jsfiddle.net/hVGwV/</a>. I invoke <code>Ember.run.sync()</code> in the example to force all bindings to sync immediately.</p> <p><strong>JavaScript:</strong></p> <pre><code>var get = Ember.get; var view; var point; var flushAndDebug = function(msg) { if (msg) { console.log(msg); } Ember.run.sync(); point.debug(); view.debug(); console.log('--------------'); }; Point = Ember.Object.extend({ x: 0, y: 0, debug: function() { console.log('point: %@/%@'.fmt(get(this, 'x'), get(this, 'y'))); } }); PointView = Ember.Object.extend({ point: null, cxBinding: 'point.x', cyBinding: 'point.y', debug: function() { console.log('view: %@/%@'.fmt(get(this, 'cx'), get(this, 'cy'))); } }); point = Point.create(); view = PointView.create(); flushAndDebug('point and view created'); view.set('point', point); flushAndDebug('after point has been set on view'); point.set('x', 50); flushAndDebug('x of point has been updated'); view.set('cy', 100); flushAndDebug('y of view has been updated'); view.set('point', null); flushAndDebug('point of view is set to null'); view.set('cx', '200'); flushAndDebug('x of view is updated'); view.set('point', point); flushAndDebug('point has been reassigned to view'); var newPoint = Point.create({ x: 400, y: 400 }); view.set('point', newPoint); flushAndDebug('new created point has been set as point on view'); point.set('x', 42); flushAndDebug('original point has been updated'); </code></pre> <p><strong>Output:</strong></p> <pre><code>point and view created point: 0/0 view: (null)/(null) -------------- after point has been set on view point: 0/0 view: 0/0 -------------- x of point has been updated point: 50/0 view: 50/0 -------------- y of view has been updated point: 50/100 view: 50/100 -------------- point of view is set to null point: 50/100 view: (null)/(null) -------------- x of view is updated point: 50/100 view: 200/(null) -------------- point has been reassigned to view point: 50/100 view: 50/100 -------------- new created point has been set as point on view point: 50/100 view: 400/400 -------------- original point has been updated point: 42/100 view: 400/400 -------------- </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload