Javascript 在ember视图中处理TextField子项上的模糊
作为探索ember.js的一种方式,我正在用100%功能兼容的版本重新创建主干todo示例应用程序。我遇到的第一个问题是双击编辑创建的todo后,如何处理Ember.TextField上的模糊事件以退出编辑模式。目前的代码如下:Javascript 在ember视图中处理TextField子项上的模糊,javascript,ember.js,Javascript,Ember.js,作为探索ember.js的一种方式,我正在用100%功能兼容的版本重新创建主干todo示例应用程序。我遇到的第一个问题是双击编辑创建的todo后,如何处理Ember.TextField上的模糊事件以退出编辑模式。目前的代码如下: <script type="text/x-handlebars" data-template-name="todo-list-template"> <ul> {{#each App.TodosController.todos}}
<script type="text/x-handlebars" data-template-name="todo-list-template">
<ul>
{{#each App.TodosController.todos}}
{{#view App.TodoView tagName="li" contentBinding="this"}}
{{#if editMode}}
{{view Ember.TextField valueBinding="content.text"}}
{{else}}
{{content.text}}
{{/if}}
{{/view}}
{{/each}}
</ul>
</script>
App.TodoView = Ember.View.extend({
editMode: false,
doubleClick: function(evt){
this.set('editMode', true);
},
blur: function(evt){
this.set('editMode', false);
}
});
{{{#每个App.TodosController.todos}
{{{#查看App.TodoView tagName=“li”contentBinding=“this”}
{{{#如果编辑模式}
{{view Ember.TextField valueBinding=“content.text”}
{{else}
{{content.text}
{{/if}
{{/view}
{{/每个}}
App.TodoView=Ember.View.extend({
编辑模式:false,
双击:功能(evt){
此.set('editMode',true);
},
模糊:功能(evt){
此.set('editMode',false);
}
});
我假设Ember.TextField定义的输入元素中的模糊事件会出现在我的视图中,但我视图中的模糊处理程序似乎从未被调用。我查看了源代码,我认为您必须使用TextSupport mixin中定义的
focusOut
事件
而且focusOut
事件不会出现在parentView
上,这就是定义自定义App.TextField
的原因
车把:
<script type="text/x-handlebars">
<ul>
{{#each App.TodosController.todos}}
{{#view App.TodoView tagName="li" contentBinding="this"}}
{{#if view.editMode}}
{{view App.TextField editModeBinding="view.editMode" valueBinding="view.content.text"}}
{{else}}
{{view.content.text}}
{{/if}}
{{/view}}
{{/each}}
</ul>
</script>
参见上的工作示例我查看了源代码,我认为您必须使用TextSupport mixin中定义的
focusOut
事件
而且focusOut
事件不会出现在parentView
上,这就是定义自定义App.TextField
的原因
车把:
<script type="text/x-handlebars">
<ul>
{{#each App.TodosController.todos}}
{{#view App.TodoView tagName="li" contentBinding="this"}}
{{#if view.editMode}}
{{view App.TextField editModeBinding="view.editMode" valueBinding="view.content.text"}}
{{else}}
{{view.content.text}}
{{/if}}
{{/view}}
{{/each}}
</ul>
</script>
请参见上的工作示例,这似乎确实有效,因此感谢您的回答。到目前为止,我很喜欢ember,但有时我觉得我希望能够处理子节点的dom事件,而不必将每个事件包装到新的视图对象中。我认为这有点违背了风格,甚至可能有代码味道。如果您想处理事件,我们通常认为您应该创建一个新视图来封装这些事件。我们正在为简单的目标/动作案例研究解决方案,但是焦点/模糊的案例非常复杂,您可能只需要创建一个自定义视图。这看起来确实有效,谢谢您的回答。到目前为止,我很喜欢ember,但有时我觉得我希望能够处理子节点的dom事件,而不必将每个事件包装到新的视图对象中。我认为这有点违背了风格,甚至可能有代码味道。如果您想处理事件,我们通常认为您应该创建一个新视图来封装这些事件。我们正在为简单的目标/动作案例研究解决方案,但是焦点/模糊的案例非常复杂,您可能只需要创建一个自定义视图。