如何在不刷新頁面的情況下在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消息，但它沒有立即在視圖中更新。我必須刷新頁面。

它可能不得不對觀察者做些什麼，但我仍然不確定如何。

來源

2015-10-05 anmol.agrawal

'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'); 
     }); 
    } 
    }

來源

2015-10-05 14:00:04 vikram7

喔我的錯。這在正常情況下會起作用，但在場景中，我在模型中啓用了分頁功能。我爲此創建了一個新問題 - 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' }); 
});

來源

2015-10-05 15:16:01 Rich

如何在不刷新頁面的情況下在EmberJS 1.13.8中渲染視圖？

回答

相關問題