Ember this.get() 未在组件上检索 属性
Ember this.get() is not retrieving property on component
在 Ember 组件 属性 中存储纯 JS 节点列表，但是当尝试使用 this.prop 或 this.get('prop') 或 get(this, 'prop') 它只有 return 未定义。
我有 console.log(this.prop) 并且我得到了 NodeList。仅从 didRender() 挂钩中的函数中检索它不会 return NodeList。
我一定是遗漏了一些明显的东西，比如我需要先把它变成一个 Ember 对象？
我的步骤：
1.在Ember组件didRender()钩子
2. 使用纯 JS 使用 querySelectorAll('.my-class') -> returns a 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!
</p>
<pre><code>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
});
}
}
虽然我会亲自重写它，但您需要访问组件的实际元素以添加侦听器：this.element.addEventListener 而不是 this.addEventListener
但您确实应该将其重写为更 ember-y，并使用操作来处理点击事件，因为那样您就可以避免所有这些问题。
在 Ember 组件 属性 中存储纯 JS 节点列表，但是当尝试使用 this.prop 或 this.get('prop') 或 get(this, 'prop') 它只有 return 未定义。
我有 console.log(this.prop) 并且我得到了 NodeList。仅从 didRender() 挂钩中的函数中检索它不会 return NodeList。
我一定是遗漏了一些明显的东西，比如我需要先把它变成一个 Ember 对象？
我的步骤：
1.在Ember组件didRender()钩子
2. 使用纯 JS 使用 querySelectorAll('.my-class') -> returns a 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!
</p>
<pre><code>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
});
}
}
虽然我会亲自重写它，但您需要访问组件的实际元素以添加侦听器：this.element.addEventListener 而不是 this.addEventListener
但您确实应该将其重写为更 ember-y，并使用操作来处理点击事件，因为那样您就可以避免所有这些问题。