`.pushObject`方法在Ember中为什么未定义。

huangapple go评论70阅读模式
英文:

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:

`.pushObject`方法在Ember中为什么未定义。

英文:

"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.

&lt;ul class=&quot;hand&quot;&gt;
  {{#each @model as |item|}}
  {{#if item.id}}
  &lt;li&gt;{{item.title}}&lt;/li&gt;
  &lt;button onclick={{fn this.delete @model item}} type=&#39;button&#39;&gt;delete&lt;/button&gt;
  {{/if}}
  {{/each}}
&lt;/ul&gt;
&lt;form onsubmit={{fn this.submit @model}}&gt;
  &lt;Input placeholder=&#39;Add todo&#39; type=&#39;text&#39; value={{this.text}} 
    onchange={{fn this.onChange}} /&gt;
  &lt;button type=&#39;submit&#39;&gt;Add&lt;/button&gt;
  {{log @model}}
&lt;/form&gt;
  @tracked
  text = &quot;&quot;;

  @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(&quot;add&quot;, model);
  }

  @action
  onChange(e) {
    this.text = e.target.value;
  }
  @action
  delete(model, item) {
    const index = model
      .map((file, index) =&gt; {
        if (file.id === item.id) {
          set(item, &quot;id&quot;, null);
          set(item, &quot;title&quot;, null);
          return index;
        }
      })
      .filter(id =&gt; 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(&quot;add&quot;, model);
  }

object is pushed but UI is not updated:

`.pushObject`方法在Ember中为什么未定义。

答案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 &#39;tracked-built-ins&#39;;

// ...
todos = new TrackedArray();

// ...
todos.push({ /* new object */ });

huangapple
  • 本文由 发表于 2023年3月4日 01:14:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/75630054.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定