EmberJS使用视图处理DOM事件 [英] EmberJS Handling DOM Events using Views

问题描述

我想使用视图切换单个表单（见下图）。
我的代码基本上工作，当我添加新的formset它添加一个空括号到json然后我
打印json出来使用eachloop

I want to toggle a single form (see picture below) using views. My code basically works when i add new formset it adds an empty bracket to json and then i print the json out using eachloop

查看模板

{{#each view.anotherField}}

<div class="panel panel-default">
     {{action 'toggleView' 'toggleViews' target='view'}}
        ...
</div>       
{{#unless view.toggleViews}}
...content to toggle...
{{/unless}}

查看控制器

actions: {
    showMoreFields: function(){
      this.get('anotherField').pushObject({name: ''});

，

toggleView: function(param){
      this.toggleProperty(param);
    }

在这个给定的图片中，你可以看到ive切换组织视图到真相我只想切换点击的部分不是所有的表单。有没有解决方案？

In this given picture u can see ive toggled organization view to truth what i would like is to toggle only the clicked part not all of the forms. Is there a solution ?

干杯，

Kristjan

推荐答案

如果我理解正确，您需要处理您的视图的特定部分/形式的事件。为了实现这一点，至少有三种方法，

If I understand correctly you need to handle events for specific parts/forms of your view. To achieve this there are at least three approaches,

1 。使用 {{action}} helper传递要修改的对象。然后在您的函数中修改该对象的属性，并在模板中反映出该属性。切换表单。也许在你的情况下，可能是这样的，

1.Use the {{action}} helper passing the object you want to modify. Then in your function modify a property of that object and reflect that in your template e.g. toggle the form. Maybe in your case it could be something like ,

....
{{#each field in view.anotherField}}

<div class="panel panel-default">
     {{action 'toggleView' field target='view'}}
....

2 。创建一个子视图/模板（例如SubFormView）来容纳每个窗体，并处理此视图中的切换事件。然后通过您的主视图模板中的 {{view}} 帮助程序来包含。

2.Make a sub view/template (e.g. SubFormView) to accomodate each of your forms and handle the event of toggle within this view. Then include this via the {{view}} helper within the template of your main view.

3 。使用纯js DOM处理（no {{action}} helper）并从中调用您的Ember组件。

3.Use pure js DOM handling (no {{action}} helper) and call your ember components from there.

方法1和3的示例可以可以在这里找到
http://emberjs.jsbin.com/acUCocu/1

Example of approaches 1 and 3 can be found here, http://emberjs.jsbin.com/acUCocu/1

hbs

<script type="text/x-handlebars" data-template-name="index">
    <i>using <b>&#123;&#123;action&#125;&#125;</b> helper</i>
    <ul>
    {{#each color in model}}
      <li {{action 'test' color}}>{{color.name}}</li>
    {{/each}}
    </ul>

    <i>using pure js DOM event handling</i>
    <ul>
    {{#each color in model}}
      <li onclick="Ember.View.views[$(this).closest('.ember-view').attr('id')].controller.send('test2',this)">{{color.name}}</li>
    {{/each}}
    </ul>
  </script>

js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return colors;
  },
  actions:{
    test:function(param){
      alert('this is color:'+param.get('name')+" ("+param+")");
    },
    test2:function(elem){
      alert('from pure js, clicked element: '+elem);
      $(elem).css('color','red');
    }
  }
});

App.Color = Ember.Object.extend({
  name:null
});

var colors=[];
colors.pushObject(App.Color.create({name:'red'}));
colors.pushObject(App.Color.create({name:'green'}));
colors.pushObject(App.Color.create({name:'blue'}));

这篇关于EmberJS使用视图处理DOM事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！