如何在不刷新页面的情况下在EmberJS 1.13.8中渲染视图？

问题描述：

对不起，如果这个问题太天真了，但我在Ember中渲染视图时感到困惑不已。如何在不刷新页面的情况下在EmberJS 1.13.8中渲染视图？

我有一个'人'路线。我能够对它进行CRUD操作。

router.js

this.route('person', function() { 
    this.route('index', { path: '' }); 
});

控制器/人/ index.js

actions: {  
    createPerson: function() { 
    var person = this.get('store').createRecord('person'); 
    this.set('person', person); 
    this.set('editPersonPane', true); 
}, 

editPerson: function(person) { 
    this.set('person', person); 
    this.set('editPersonPane', true); 
}, 

closeEditPerson: function() { 
this.get('person').rollback(); 
this.set('editPersonPane', false); 
}, 

savePerson: function(person) { 
    var _this = this; 
    person.save().then(function() { 
    _this.set('editPersonPane', false); 
    Ember.get(_this, 'flashMessages').success('person.flash.personUpdateSuccessful'); 
    }, function() { 
    Ember.get(_this, 'flashMessages').danger('apiFailure'); 
    }); 
}, 

deletePerson: function(person) { 
    var _this = this; 
    person.destroyRecord().then(function() { 
    _this.set('editPersonPane', false); 
    Ember.get(_this, 'flashMessages').success('person.flash.personDeleteSuccessful'); 
    }, function() { 
    Ember.get(_this, 'flashMessages').danger('apiFailure'); 
    }); 
} 
}

我想现在要做的是，当我想创建一个新的人，一个幻灯片的形式来创建它。填写完表格后，我希望立即更新人员的列表视图，而无需刷新页面。现在，我已经能够添加表单，并且当我添加一个新的人员时，我得到了一个成功的Flash消息，但它没有立即在视图中更新。我必须刷新页面。

它可能不得不对观察者做些什么，但我仍然不确定如何。

'person.save（），然后（函数（savedPerson）{savedPerson.reload（）; //休息您的代码}）;' –

答

重装保存的对象可以让你避免刷新页面：

savePerson: function(person) { 
    var _this = this; 
    person.save().then(function(saved) { 
    saved.reload(); 
    _this.set('editPersonPane', false); 
    Ember.get(_this, 'flashMessages').success('person.flash.personUpdateSuccessful'); 
    }, function() { 
    Ember.get(_this, 'flashMessages').danger('apiFailure'); 
    }); 
}

此外，值得注意的是，如果你解构和使用ES6语法，你可以清理你的代码有点如下：

//controllers/person/index.js 
//at the top of the file 
import Ember from 'ember'; 

const { get, set } = Ember; 

//other code 

    actions: {  

    //other actions 

    savePerson(person): { 
     person.save().then((saved) => { 
     saved.reload(); 
     set(this, 'editPersonPane', false); 
     get(this, 'flashMessages').success('person.flash.personUpdateSuccessful'); 
     },() { 
     get(this, 'flashMessages').danger('apiFailure'); 
     }); 
    } 
    }

喔我的错。这在正常情况下会起作用，但在场景中，我在模型中启用了分页功能。我为此创建了一个新问题 - http://stackoverflow.com/questions/33779235/how-to-update-the-ui-immediately-when-a-new-record-is-added-related-to-mber -cl –

答

哪条路线正在显示您的人员列表？

不会像这样的工作更好，所以你可以显示列表，然后编辑persons.hbs插座内的人吗？。

this.route('persons', function() { 
    this.route('person', { path: 'id' }); 
});

如何在不刷新页面的情况下在EmberJS 1.13.8中渲染视图？

相关推荐