javascript - EmberJS - 文本绑定(bind)不起作用

Question

好吧，让我先说一下我对 Ember 完全陌生。我正在经历一段有趣的时光，只是试图让基本的绑定(bind)发挥作用。这是我的相关代码:

App.js

var App = Ember.Application.create({
    rootElement: '#emberApp'
});

和routes.js:

App.Router.map(function () {

});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return { Foo: 3 };
    }
});

然后这是我的 HTML 文档:

<div id="emberApp"></div>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/handlebars.js"></script>
<script src="~/Scripts/ember-1.4.0.js"></script>
<script src="~/Scripts/EmberApp.js"></script>
<script src="~/Scripts/Routes.js"></script>

<script type="text/x-handlebars" data-template-name="index">
    <div>The current foo value: {{Foo}}</div>
    {{input valueBinding=Foo}}
</script>

预期的结果是，当我在创建的输入字段中键入内容时，模板中绑定(bind)的值同时发生变化。应该很简单吧？我必须缺少一些东西。

模板正确呈现当前 foo 值:3，并呈现一个文本字段。但是，在此字段中输入任何内容对上述绑定(bind)没有任何影响。我尝试使用 valueBinding 标记来标记它，并切换到 Ember.TextField 而不是 input 帮助器。我还尝试创建一个自定义 Ember.Object.extend 类并将其作为索引路由的模型返回。

为了将文本框值绑定(bind)到模板中的 {{Foo}} 值，我缺少什么？

编辑 - 好吧，我发现这是因为变量的大写:foo有效，但Foo无效。这是为什么？

我期望收到与此类似的 JSON 结果:

 {
     RemoteUserId: 0,
     UserPhotoUrl: '....',
     RemoteUserName: 'Bob',
 }

我假设这意味着我需要通过为每个元素制作 Controller 包装来“隐藏”这些值？即:

 remoteUserId: function() {
      return this.get('RemoteUserId');
   }.property()

Answer 1

恐怕您已经被 Embers 命名约定之一所困扰，这通常很棒，因为它通常意味着一切正常工作，但如果您没有意识到的话，偶尔会困扰您。

Ember 希望类或命名空间大写，实例小写。当 Ember 看到绑定(bind)中使用 Foo 属性时，它会假定它是一个命名空间，然后会查找名为 Foo 的全局变量，而不是 Controller 属性。

当您在模板中使用 {{Foo}} 时，行为略有不同，因为 Ember 将首先检查当前上下文( Controller )以查看该属性是否存在。如果确实如此，它将使用该值，否则它将假设它是一个 namespace 并在全局范围内查找它。由于性能问题，绑定(bind)不像模板那样工作，因为您不想检查绑定(bind)中可能经常更新的值的两个位置(例如正在键入的文本框)。

这就是为什么您可以在模板中使用 Foo 并且它有效:

<script type="text/x-handlebars" data-template-name="index">
    <!-- This works! -->
    <div>The current foo value: {{Foo}}</div>   
</script>

但是当您尝试使用 Foo 作为绑定(bind)的一部分时，它将不起作用:

<script type="text/x-handlebars" data-template-name="index">
     <!-- This doesn't work as Ember thinks Foo is global (i.e., a namespace) -->
     {{input valueBinding=Foo}}
</script>

最好的选择是遵循 ember 约定，并确保所有属性名称都以小写字符开头。但是，如果您想继续在 Controller 中使用以大写字符开头的属性，那么当您尝试在绑定(bind)中使用它时，您需要明确告诉 Ember 该属性来自 Controller 并且不是全局的:

<script type="text/x-handlebars" data-template-name="index">
     <!-- Tell Ember Foo is in the controller which is what we want-->
     {{input valueBinding=controller.Foo}}
</script>

这是一个 fiddle ，演示了上面写的所有内容:

http://jsfiddle.net/NQKvy/881/