Question

我有一组按钮，其状态我希望用类active切换。如果我只有一个按钮，那么我会将active类绑定到控制器属性并在单击处理程序中切换该属性：

<button {{action 'toggle'}} class="{{active}}">model.title</button>

actions: {
  toggle: function() {
    this.set('active', true);
  }
}

但我有多个按钮，所以我不确定我能绑定什么。如果我可以将对单击按钮的引用传递给动作处理程序，那将非常有用，但我不知道如何执行此操作。

{{#each item in model}}
  <button {{action 'toggle' referenceToButton}}>model.title</button>
{{/each}}

actions: {
  toggle: function(buttonReference) {
    // add `active` class to buttonReference
  }
}

实现这一目标的最佳方法是什么？

Answer 1

尽管海报得到了他想要的答案，但我想我会回答我认为原始问题的意图：

如何从动作中获取被点击的DOM元素？，因为我来到这里寻找该问题的答案并且没有找到它。

我无法找到获取实际元素的方法，但您可以通过this获取根视图元素（包装模板中定义的元素）：

模板：

<button {{action 'toggle' this}}>model.title</button>

controller，view，component：

actions: {
  toggle: function(event) {
    // Get element (as in the return value of document.getElementById(id))
    var viewElements = event.element;
    var elementsInTemplate = viewElements.children;
    var button = viewElements.getElementsByTagName('button');
    //also can use getElementsByClassName, use jQuery etc.
  }
}

Answer 2

只是另一个答案......

如果您将动作放入onclick（或任何其他dom事件），您将获得＆＃34;事件＆＃34;最后一个参数中的javascript对象（因此您可以使用event.target来获取和操作对象）

模板：

Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>AU Study Sessions</title>

    <link href="../css/bootstrap.css" rel="stylesheet">

    <link href="../css/main.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

    <link rel="shortcut icon" href="../images/favicon.png">
    <script src="../js/pace.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>

</head>
<body>

    <div class="preloader"></div>

    <!-- ******************** MASTHEAD SECTION ******************* -->

    <main id="top" class="masthead" role="main">
        <div class="container">
            <div class="logo">
                <a href=""><img src="../images/aulogo2.png" alt="logo"></a>
            </div>

            <h1>View Study Sessions</h1>);

            <table>


            <tr>
                <td>session1</td>
                <td>class1</td>
                <td>start1</td>
                <td>leader1</td>
                <td>prof1</td>
                <td>desc1</td>
            </tr>

            <tr>
                <td>session2</td>
                <td>class2</td>
                <td>start2</td>
                <td>leader2</td>
                <td>prof2</td>
                <td>desc2</td>
            </tr>


            <br/>
            <br/>

            <a href=""> Add a Study Session</a>

            <!--<a href="index.html#explore" class="scrollto">
            <p>SCROLL DOWN TO EXPLORE</p>
            <p class="scrollto--arrow"><img src="../images/scroll_down.png" alt="scroll down arrow"></p>
            </a> -->

        </div>
    </main>


    <!-- ******************** FOOTER SECTION ******************** -->  
    <div class="container" id="explore">
        <div class="section-title">
            <h2>With Adelphi Study Sessions Website</h2>
            <h4>You will be able to do the following</h4>
        </div>

        <section class="row features">
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_01.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>View Study Groups</h3>
                        <p>See the most up to date study sessions taking place on our garden city campus.</p>
                    </div>
                </div><! --/thumbnail -->
            </div><! --/col-sm-6-->

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_02.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>Add and create new study sessions</h3>
                        <p>If you or some classmates want to create a new study session you will be able to add a new group along with course information, sudy topics, and time and location taking place.</p>
                    </div>
                </div><! --/thumbnail -->
            </div><! --/col-sm-6-->

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_03.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>See description of session</h3>
                        <p>The student who creates the study session will give a short description about what the study session will cover.</p>
                    </div>
                </div><! --/thumbnail -->
            </div><! --/col-sm-6-->

            <div class="col-sm-6 col-md-3">
                <div class="thumbnail"> 
                    <img src="../images/service_04.png" alt="analytics-icon">
                    <div class="caption">
                        <h3>Available on campus</h3>
                        <p>All study sessions will take place on our Garden City campus therefore are available to all students who commute or live on campus.</p>
                    </div>
                </div><! --/thumbnail -->
            </div><! --/col-sm-6-->
        </section><! --/section -->

        <script src="../js/jquery.js"></script>
        <script src="../js/bootstrap.js"></script>
        <script src="../js/easing.js"></script>
        <script src="../js/nicescroll.js"></script> 

    </body>

</html>

路线或控制器：

<button onclick={{action 'toggle' model.title}}>model.title</button>

希望有所帮助

Answer 3

模型项目不是您要传递的而不是按钮吗？

然后，您的切换只需在您bind to your button class的项目上设置属性。

{{#each item in model}}
  <button {{bind-attr class="item.isActive:active"}} {{action 'toggle' item}}>model.title</button>
{{/each}}

actions: {
  toggle: function(item) {
    item.set('isActive', true);
  }
}

Answer 4

您可以将active属性引入items

{{#each item as |model|}}
  <button {{action 'toggle' model}} class={{if model.active 'active'}}>{{model.title}}</button>
{{/each}}

如果active=true，则active类将应用于按钮。

actions: {
  toggle: function(buttonReference) {
    buttonReference.set('active', true);
  }
}

回答问题标题Pass a reference of the clicked DOM element to the action handler in Ember。

1.如果您正在使用组件，那么您可以在组件中定义任何此list of event names，并且该组件旨在接收本机event对象。例如。， {{my-button model=model}}

export default Ember.Component.extend({
 click(event){
  //oncliking on this componen will trigger this function
  return true; //to bubble this event up
 }
})

2.如果您使用的是button之类的html标签，那么您需要为内联事件处理程序分配一个（闭包）动作。

{{#each item as |model|}}
      <button onclick={{action 'toggle' model}}>{{model.title}}</button>
{{/each}}

在操作中，散列toggle函数将始终接收本机浏览器event对象作为最后一个参数。

actions:{
 toggle(model,event){

 }
}

采用此<button {{action 'toggle' model}}>{{model.title}}</button>格式，操作toggle将不会收到event个对象，

在ember指南https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

中解释得非常好

将单击的DOM元素的引用传递给Ember中的操作处理程序

4 个答案: