Ember this.get() 没有检索组件的属性

Question

在 Ember 组件属性中存储一个普通 JS 节点列表，但是当尝试使用 this.prop 或 this.get('prop') 或 get(this, 'prop') 在函数中访问它时，它只返回 undefined .

我有 console.log(this.prop) 并且我得到了 NodeList。仅从 didRender() 钩子中的函数中检索它不会返回 NodeList。

我一定遗漏了一些明显的东西，比如我需要先把它变成一个 Ember 对象？

我的步骤：
1.在Ember组件中didRender()钩子
2. 使用纯JS 使用querySelectorAll('.my-class') -> 返回一个NodeList // working!
3.在Nodelist中添加事件监听// working!
4.设置组件属性为NodeList值this.set('prop', Nodelist)// working!
5.在didRender()外调用事件监听函数// working!
6. 在函数中（didRender() 钩子外），尝试使用this.prop、this.get('prop') 或get(this, 'prop') 检索变量并分配给变量。 // NOT working!

import Component from '@ember/component';
import { get, set } from '@ember/object';
export default Component.extend({
    myProp: null,
    handlerForButtons(e){ // Fires when any button clicked. Handler for buttons.
        e.preventDefault();

        let currentButton = e.target;
        currentButton.style.display = 'none';
        let currentSibling = currentButton.nextElementSibling;
        currentSibling.style.display = 'block';

        // this assignment myProp is undefined
        let myProp = this.myProp; // also this.get('myProp'); or get(this, 'myProp'); not working.
        console.log("myProp: ", myProp);
    },

    didRender(){

        let allButtons =  document.querySelectorAll('ul.aog-list li > button');
        this.addListeners(allButtons, ['click', 'keydown'], this.handlerForButtons);


        let allSiblings =   document.querySelectorAll('ul.aog-list .aog-wrap');
        this.set('myProp', allSiblings);
        console.log("SET myProp: ", this.myProp); // Shows a NodeList of 32 items

        allSiblings.forEach(function(e){
            e.style.display = 'none'; //Hide sibling divs for initial state
        });

    }
}

Answer 1

虽然我会亲自重写，但您需要访问组件的实际元素以添加侦听器：this.element.addEventListener 而不是 this.addEventListener

但是您确实应该将其重写为更加 ember-y，并使用操作来处理点击事件，因为这样您就可以避免所有这些问题。