Ember.js中两个任意对象之间的绑定

我很难理解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：

---

理想情况下，我甚至更愿意在PointView init（）中创建绑定，以便PointView.create（{point:aPoint}）正确设置所有内容。这可能吗？

余烬依赖于一些惯例。其中之一是所有对象/类都应位于同一应用程序命名空间下。例如，类似于

window.App=Ember.Application.create（）

我重写了你的例子，让你生活在同一个名字空间里——然后它就起作用了：

---

余烬依赖于一些惯例。其中之一是所有对象/类都应位于同一应用程序命名空间下。例如，类似于

window.App=Ember.Application.create（）

我重写了你的例子，让你生活在同一个名字空间里——然后它就起作用了：

---

以下是一个有效的版本：

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

​我更改了根据当前点的值计算的属性

---

然后，当您更改

aPoint

的值时，必须使用

x

属性，因为

cx

是PointView中的属性。

以下是一个有效的版本：

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

​我更改了根据当前点的值计算的属性

---

然后，当您更改

aPoint

的值时，必须使用

x

属性，因为

cx

是PointView中的属性。

我创建了一个JSFIDLE，您可以在其中使用绑定，请参阅。我在示例中调用

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

输出：

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

---

我已经创建了一个JSFIDLE，您可以在其中使用绑定，请参阅。我在示例中调用

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

输出：

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

---

以下是一个双向示例：

模板：

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

---

以下是一个双向示例：

模板：

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

---

此小提琴在我的浏览器中的行为与预期不符：回声“未定义”。。。出问题了吗？“所有对象/类都应该在同一个应用程序命名空间下。”真的是这样吗？我的应用程序显然会有很多点（和许多点视图），我不能只使用app.aPoint：你如何处理这种情况？这把小提琴在我的浏览器中的行为不符合预期：回声“未定义”。。。出问题了吗？“所有对象/类都应该在同一个应用程序命名空间下。”真的是这样吗？我的应用程序显然有很多点（和很多点视图），我不能只使用app.aPoint：你如何处理这种情况？但是如果我使用aPointView.set（'cx'，10），aPoint.get（'x'）仍然是0（所以它只是一个观察者，不是双向绑定，对吗？），但是如果我使用aPointView.set（'cx'，10），aPoint.get（'x'）仍然是0（所以它只是一个观察者，不是双向绑定，对吗？）所以绑定在Ember.sync.run（）中更新，这就解释了为什么我在JSFIDLE中的所有测试都不起作用；）非常感谢！因此绑定在Ember.sync.run（）中更新，这就解释了为什么我在JSFIDLE中的所有测试都不起作用；）谢谢！谢谢你的努力，但我不想输出HTML。实际上，我正在尝试围绕Raphael路径创建一个包装器对象，并希望将数据模型中某个点的坐标绑定到Raphael对象路径中某个点的坐标。我用上面pangratz的例子做到了这一点，并使用计算属性来管理Raphael对象：）感谢您的努力，但我不想输出HTML。实际上，我正在尝试围绕Raphael路径创建一个包装器对象，并希望将数据模型中某个点的坐标绑定到Raphael对象路径中某个点的坐标。我用上面pangratz的例子做到了这一点，并使用计算属性对Raphael对象进行了处理：）感谢那些没有评论就投了反对票的人……特别是因为我不久前接受了一个答案。感谢那些没有评论就投了反对票的人……特别是因为我不久前接受了一个答案。