Question

当我发出AJAX请求更新某些值时，数据或模型正在更改。但是更新后的模型无法立即反映出来。仅在单击刷新后才反映出来。我只想修改页面中div的视图。我尝试了很多事情，但没有成功。谁能建议我解决问题的方法？ git仓库： https://github.com/SyamPhanindraChavva/trell-app-front-end

templates / note.hbs

 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <p><a class="dropdown-item" {{action 'updateNote' "doing" note.id}}>DOING</a></p>
    <p><a class="dropdown-item"{{action 'updateNote' "done" note.id}}>DONE</a></p>
    <p><a class="dropdown-item"{{action 'deleteNote'  note.id}}>DELETE</a></p>
  </div>

controllers / notes.js

status2:Ember.inject.service('work-status'),
actions: {
    updateNote(upstatus,id){
        let status1 = Ember.get(this,'status2');
        status1.makeputrequest(upstatus,id);
        this.toggleProperty('parameter');
    }
}

services / work-status.js

makeputrequest(status1,id1)
  {
    $.when($.ajax ({
  //  get(this,'layout.referrer.owner.router').transitionTo('notes');
        type: 'PUT',
        url:'http://localhost:3000/notes/'+id1,
        data: {note:{status:status1}},

      })).then(function(result){
        console.log(result);
      }).catch(function(err){
        console.log("you have error")
      });
},

我想做的是，每当更改记录的状态时，UI中的相应记录也必须转到UI中的相应表或容器。

Answer 1

由于直接在ember中使用ajax调用，一旦完成，您将负责设置新属性。

在services / work-status.js中，您将希望返回由ajax调用生成的承诺。

在controllers / notes.js中，将.then链接到返回的Promise并调用并设置新属性。

EG-控制器/notes.js

updateNote(upstatus,id){
    let status1 = Ember.get(this,'status2');
    status1.makeputrequest(upstatus,id).then((){
        this.get('model').findBy('id',id).set('status',upstatus);
    });
},

话虽如此，这不是正确的选择。您正在将ember-data与普通的ajax调用混合在一起，这使代码库的逻辑变得比必要的更加困难。

如果您修改操作以将整个笔记作为参数，更改状态并仅保存模型，则无需使用该服务。

// templates/note.hbs
<p><a class="dropdown-item" {{action 'updateNote' note "doing"}}>DOING</a></p>

// controllers/note.js
updateNote(note,upstatus) {
    note.set('status',upstatus)
    note.save();
}

Answer 2

仅当您不尝试更改记录中的内容时，才使用Ajax。但是，如果您想更改记录的值，则应使用ember-data

随着模型发生的更改，Ember View不会立即更新

2 个答案: