EmberJS - 文本绑定不工作 [英] EmberJS - Text Binding Not Working
问题描述
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-handlebarsdata-template-name =index>
< div>当前foo值：{{Foo}}< / div>
{{input valueBinding = Foo}}
< / script>
预期的结果是，当我输入创建的输入字段时，绑定在模板同时更改。应该是相当简单吗？我必须缺少一些东西。
模板正确呈现当前的foo值：3 ，它会呈现一个文本字段。但是，在此字段中输入任何内容对上述绑定没有任何影响。我尝试使用 valueBinding 标记进行标记，并切换到 Ember.TextField 而不是 input helper。我还尝试制作一个自定义的 Ember.Object.extend 类，并将其作为索引路线的模型返回。
为了将文本框值绑定到模板中的 {{Foo}} 值，我缺少什么？
编辑 - 好的，我知道这是因为变量的大小写： foo 工程，但不是code> Foo 。为什么是这样？
我希望收到类似于此的JSON结果：
code> {
RemoteUserId：0，
UserPhotoUrl：'....'，
RemoteUserName：'Bob'，
}
我假设这意味着我需要通过为每个元素制作控制器包装来隐藏这些值即：
remoteUserId：function（）{
return this.get（'RemoteUserId'
} .property（）
恐怕你已经被其中一个Embers命名约定咬死了，通常很棒，因为它通常意味着事情只是工作，但如果你不知道，偶尔会咬你。
Ember希望Classes或Namespaces大写，并且该实例是小写的。当Ember看到绑定中使用的 Foo 属性时，它假定它是一个命名空间，然后将寻找一个名为 Foo 而不是控制器属性。
当您在模板中使用 {{Foo}} 时，行为稍微不同的是，Ember将首先检查当前上下文（控制器）以查看属性是否存在于该位置。如果它使用该值，否则它将假定它是一个命名空间，并在全球寻找。由于性能问题，绑定不像模板一样工作，因为您不希望检查两个位置，以便可以非常频繁地更新绑定中的值（例如键入的文本框）。
这就是为什么你可以在模板中使用 Foo ，它的工作原理是：
< script type =text / x-handlebarsdata-template-name =index>
<！ - 这个工程！ - >
< div>当前foo值：{{Foo}}< / div>
< / script>
但是，当您尝试使用 Foo 作为绑定的一部分将不起作用：
< script type =text / x-handlebarsdata-template- name =index>
<！ - 这不工作，因为Ember认为Foo是全局的（即命名空间） - >
{{input valueBinding = Foo}}
< / script>
最好的方法是遵循ember约定，并确保所有属性名称以小写字符开头。但是，如果要继续使用以大写字母开头的控件中的属性，那么您将需要显式地告知Ember该属性来自控制器，并且当您尝试在绑定中使用属性时，该属性不全局：
< script type =text / x-handlebarsdata-template-name =index>
<！ - 告诉Ember Foo在控制器中是我们想要的 - >
{{input valueBinding = controller.Foo}}
< / script>
这是一个小提琴演示上面写的所有内容：
http://jsfiddle.net/NQKvy/881/
Ok, so let me preface this by saying I'm completely new to Ember. I'm having an interesting time just trying to get a basic binding to work. Here's my relevant code:
App.js
var App = Ember.Application.create({
rootElement: '#emberApp'
});
And routes.js:
App.Router.map(function () {
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return { Foo: 3 };
}
});
And then here is my HTML document:
<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>
The intended result is that when I type in the input field created, the value that is bound in the template changes at the same time. It should be fairly simple right? I have to be missing something.
The template correctly renders The current foo value: 3, and it renders a text field. However, typing anything into this field does nothing to the above binding. I have tried marking it with a valueBinding tag, as well as switching to Ember.TextField instead of a input helper. I've also tried making a custom Ember.Object.extend class and returning that as the model for the index route.
What am I missing in order to bind the text box value to the {{Foo}} value in the template?
EDIT - Ok, I've figured out it's because of the capitalization of the variable: foo works, but not Foo. Why is this?
I'm expecting to receive JSON results similar to this:
{
RemoteUserId: 0,
UserPhotoUrl: '....',
RemoteUserName: 'Bob',
}
I'm assuming this means I need to 'hide' these values by making controller wrappers for each element? ie:
remoteUserId: function() {
return this.get('RemoteUserId');
}.property()
I'm afraid you've been bitten by one of Embers naming conventions which is normally awesome as it usually means things just work, but occasionally will bite you if you're not aware of it.
Ember expects that Classes or Namespaces are capitalized and that instances are lowercase. When Ember sees the Foo property used in a binding it assumes it's a namespace and will then look for a global variable called Foo instead of a controller property.
When you use {{Foo}} in a template the behavior is slightly different as Ember will first check the current context (the controller) to see if the property exists there. If it does it uses that value, otherwise it will assume it's a namespace and look for it globally. Bindings don't work like templates due to performance concerns as you don't want to have to check two locations for a value in a binding that could be updated very frequently (like a textbox being typed in).
This is why you can use Foo in the template and it works:
<script type="text/x-handlebars" data-template-name="index">
<!-- This works! -->
<div>The current foo value: {{Foo}}</div>
</script>
But when you try to use Foo as part of a binding it won't work:
<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>
Your best bet is to just follow ember conventions and make sure all your property names start with a lowercase character. However, if you want to continue using properties in your controllers that start with a capital character then you will need to explicitly tell Ember that the property is from the controller and is not global when you try to use it in a binding:
<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>
Here is a Fiddle demonstrating everything written above:
这篇关于EmberJS - 文本绑定不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
