Связывания между двумя произвольными объектами в ember.js

Question

У меня возникли проблемы с пониманием синтаксиса двухсторонних привязок в ember.js

У меня есть два объекта, которые я хотел бы, чтобы связать вместе, вот что я пытался :

App = Ember.Application.create({}); 

App.MyPoint = Ember.Object.extend({ 
    x: 0, 
    y: 0, 
    init: function() 
    { 
    } 
}); 

App.PointView = Ember.Object.extend({ 
    point: null, 
    cx: 0, 
    cy: 0, 
    init: function() 
    { 
    } 
}); 


var aPoint = App.MyPoint.create(); 

var aPointView = App.PointView.create({point: aPoint, cxBinding: "aPoint.x", cyBinding: "aPoint.y"}); 

console.log("Expect 0, 0: ", aPointView.get('cx'), aPointView.get('cy')); 

aPoint.set('x', 10); 
console.log("Expect 10, 0: ", aPointView.get('cx'), aPointView.get('cy')); // But I get 0, 0 ... 

jsfiddle: http://jsfiddle.net/W9qtF/

в идеале, я бы даже предпочел, чтобы создать привязку в PointView Init(), так что PointView.create ({точка: aPoint}) устанавливает все правильно. Это возможно?

Answer 1

Я создал JSFiddle, где вы можете играть со связями, см. http://jsfiddle.net/hVGwV/. Я вызываю Ember.run.sync() в примере, чтобы принудительно синхронизировать все привязки.

JavaScript:

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'); 

Выход:

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 
-------------- 

Answer 2

Ember полагается на некоторые соглашения. Один из них заключается в том, что все объекты/классы должны находиться в одном пространстве имен приложений. То есть что-то вроде window.App = Ember.Application.create().

я переписал свой пример, чтобы жить под тем же именем пространства - а затем он работает:

http://jsfiddle.net/phGeP/1/

App = Ember.Application.create(); 

App.MyPoint = Ember.Object.extend({ 
    x: 0, 
    y: 0 
}); 

App.PointView = Ember.Object.extend({ 
    point: null, 
    cxBinding: "point.x", 
    cyBinding: "point.y" 
}); 


App.aPoint = App.MyPoint.create(); 

App.aPointView = App.PointView.create({point: App.aPoint}); 

console.log("Expect 0, 0: ", App.aPointView.get('cx'), App.aPointView.get('cy')); 

App.aPoint.set('cx', 10); 
console.log("Expect 10, 0: ", App.aPointView.get('cx'), App.aPointView.get('cy')); 
​ 

Answer 3

Вот версия, которая работа:

MyPoint = Ember.Object.extend({ 
    x: 0, 
    y: 0 
}); 

PointView = Ember.Object.extend({ 
    point: null, 

    cx: function() { 
     return this.point.x; 
    }.property('point'), 

    cy: function() { 
     return this.point.y; 
    }.property('point') 
}); 

aPoint = MyPoint.create(); 

aPointView = PointView.create({ 
    point: aPoint 
}) 

console.log("Expect 0, 0: ", aPointView.get('cx'), aPointView.get('cy')); 

aPoint.set('x', 10); 
console.log("Expect 10, 0: ", aPointView.get('cx'), aPointView.get('cy')); // But I get 0, 0 ... 

Я изменил cx & cy свойства, которые должны вычисляться в соответствии с текущим значением.

Тогда, когда вы изменяете значение aPoint, вы должны использовать x property, так как cx является собственностью компании PointView.

Answer 4

Вот двунаправленная пример:

Шаблон:

<script type="text/x-handlebars" data-template-name="point-view"> 
    Point: ({{point.x}}, {{point.y}}) 

    <p> 

    {{view Ember.TextField valueBinding="point.x"}} 
    {{view Ember.TextField valueBinding="point.y"}} 
    {{#view Ember.Button target="App.pointController" action="resetCoordinates"}}Reset coordinates{{/view}} 
</script> 

JS:

App = Ember.Application.create() 

App.Point = Ember.Object.extend({ 
    x: 0, 
    y: 0, 

    reset: function() { 
     this.set('x', 0); 
     this.set('y', 0); 
    } 
}); 

App.PointView = Ember.View.extend({ 
    templateName: 'point-view', 
    pointBinding: 'App.pointController.point' 
}); 

App.pointController = Ember.Object.create({ 
    point: null, 

    init: function() { 
     this.set('point', App.Point.create()); 
    }, 

    resetCoordinates: function() { 
     this.point.reset(); 
    } 
}) 

App.PointView.create().append();