英文:
why .pushObject method is undefined in ember
问题
"model.pushObject is not a function" error. i am trying to build a to-do list app, and while updating an object it says model.pushObject is not a function.
<ul class="hand">
{{#each @model as |item|}}
{{#if item.id}}
<li>{{item.title}}</li>
<button onclick={{fn this.delete @model item}} type='button'>delete</button>
{{/if}}
{{/each}}
</ul>
<form onsubmit={{fn this.submit @model}}>
<Input placeholder='Add todo' type='text' value={{this.text}}
onchange={{fn this.onChange}} />
<button type='submit'>Add</button>
{{log @model}}
</form>
@tracked
text = "";
@action
submit(model, event) {
event.preventDefault();
const i = model[model.length - 1].id + 1;
const newTodo = {
id: i,
title: this.text
};
model.pushObject(newTodo);
model = model;
console.log("add", model);
}
@action
onChange(e) {
this.text = e.target.value;
}
@action
delete(model, item) {
const index = model
.map((file, index) => {
if (file.id === item.id) {
set(item, "id", null);
set(item, "title", null);
return index;
}
})
.filter(id => id !== undefined);
model.splice(index[0], 1);
}
I tried using model.push
, and it is working, but the {{#each}} is not updating the information.
@action
submit(model, event) {
event.preventDefault();
const i = model[model.length - 1].id + 1;
const newTodo = {
id: i,
title: this.text
};
model.push(newTodo);
model = model;
console.log("add", model);
}
The object is pushed, but the UI is not updated:
英文:
"model.pushObejct is not a function" error. i am trying build an to do list app..and while updating an object it says model.pushObject is not a function.
<ul class="hand">
{{#each @model as |item|}}
{{#if item.id}}
<li>{{item.title}}</li>
<button onclick={{fn this.delete @model item}} type='button'>delete</button>
{{/if}}
{{/each}}
</ul>
<form onsubmit={{fn this.submit @model}}>
<Input placeholder='Add todo' type='text' value={{this.text}}
onchange={{fn this.onChange}} />
<button type='submit'>Add</button>
{{log @model}}
</form>
@tracked
text = "";
@action
submit(model, event) {
event.preventDefault();
const i = model[model.length - 1].id + 1;
const newTodo = {
id: i,
title: this.text
};
model.pushObject(newTodo);
model=model;
console.log("add", model);
}
@action
onChange(e) {
this.text = e.target.value;
}
@action
delete(model, item) {
const index = model
.map((file, index) => {
if (file.id === item.id) {
set(item, "id", null);
set(item, "title", null);
return index;
}
})
.filter(id => id !== undefined);
model.splice(index[0], 1);
i tried model.push it is working but the {{#each}} is not updating the information..
@action
submit(model, event) {
event.preventDefault();
const i = model[model.length - 1].id + 1;
const newTodo = {
id: i,
title: this.text
};
model.push(newTodo);
model=model;
console.log("add", model);
}
object is pushed but UI is not updated:
答案1
得分: 3
pushObject
在原生 JS 数组中不存在,文档在此
要使用 pushObject
,您必须启用原型扩展。这里是有关启用/禁用的相关文档。
另一种原生方法是执行 this.array = [...this.array]
,因为这将更新已跟踪的 引用(跟踪更新操作基于_引用_,而不是_值_)。
另一种方法是使用响应式数组,如下所示:
import { TrackedArray } from 'tracked-built-ins';
// ...
todos = new TrackedArray();
// ...
todos.push({ /* 新对象 */ });
英文:
pushObject
does not exist on native JS Arrays, docs here
To use pushObject
, you must enable prototype extensions. Here are the relevant docs for enabling/disabling.
An alternative native way would be to do this.array = [...this.array]
as that will update the tracked reference (tracking updates operate on references, rather than values.
An another way would be to use a reactive array, like this:
import { TrackedArray } from 'tracked-built-ins';
// ...
todos = new TrackedArray();
// ...
todos.push({ /* new object */ });
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论