在Ember中觸發組件中的功能

Question

當我過渡到新路線時，我設置了reportName屬性，並希望基於觀察到的reportname更改postobject並觸發發送ajax請求。 在ajax的響應上，我獲得了要作為屬性傳遞到圖形組件的數據，並且此具有數據值的更新屬性導致組件中的函數被觸發。 但即時通訊無法做到。 你能告訴我我做錯了嗎？ 我是灰燼新手。 吊艙控制器：

export default Ember.Controller.extend(ApplicationRouteMixin, {
    sessionService: Ember.inject.service('session'),

    nameOfReport: null,  

    postObject: function(){
        return {
            Name: this.get('nameOfReport'),
            Take: 30,
            Skip: 0,
        };
    }.property('nameOfReport'),


    ajaxResponse: function(){

       var restApiHost = serverPath + '/report';
       var postobj=  this.get('postObject');
       var token =this.get('sessionService.session.authenticated.access_token');

        Ember.$.ajax({
            url: restApiHost,
            type: 'POST',
            data: JSON.stringify(postobj),
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            beforeSend: function (xhr) {
                var bearer = 'Bearer ' + token ;
                xhr.setRequestHeader('Authorization', bearer);
                xhr.setRequestHeader('Content-type', 'application/json');
            },
            success: function (data) {
                var graphobj= {
                    data:  data.data,          
                    graphModel: GraphModel.create({
                        graphHeight: "320",
                        graphMargin: [40, 80, 40, 60],
                        xDomain: [1, 10],
                        yDomain: [1, 100]
                    …
                    })};
                 Ember.set(this,'graphobject', graphobj);    
            },

            fail: function () {
                alert('Could not contact server');
            },
        });
    }.property('postObject'),       


    graphobject: function(){
        this.get('ajaxResponse');
    }.property('ajaxResponse'),

});

Pod模板：

<div>
               {{line-graph model= graphobject }} 
</div>

零件：

drawGraph: function() {
        // define dimensions of graph   
        var graphdata = this.get('model.data');
        var graphmodel = this.get('model.graphModel');
...
}.property('graphobject'),

Answer 1

首先，您的一行Ember.set(this,'graphobject', graphobj); 實際上會覆蓋您存儲在graphobject屬性中的graphobject -因此您不需要該函數。

其次，即使您的drawGraph屬性由於其依賴鍵之一已更改而被標記為臟（在您的代碼中似乎是這種情況），它也不會運行，直到某些代碼get了該屬性。 如果模板本身訪問屬性，則可能是在重新渲染過程中發生的；否則，是從觀察者那里看到的，或者是在執行操作時發生的。

嘗試使drawGraph觀察graphobject 。 此外，您可能需要在初始化或插入時運行drawGraph ：

drawGraph: function() {
    // define dimensions of graph
    var graphdata = this.get('model.data');
    var graphmodel = this.get('model.graphModel');
    ...
}.observes('graphobject').on('init')/* or .on('didInsertElement') */,

大多數人建議避免使用觀察者，但是由於我不知道您在drawGraph函數中正在做什么，因此drawGraph很難推薦其他方法。

如果要在drawGraph中設置一個屬性，然后在模板中呈現該屬性，則可以使drawGraph返回該值（而不是將其設置為另一個屬性），然后在模板中呈現drawGraph而不是另一個屬性。 （然后不要使drawGraph成為觀察對象；將其保留為計算屬性。）

如果您正在使用jQuery來操縱drawGraph內的DOM，並且由於某些原因而無法使用模板進行操作，那么觀察者可能是唯一的選擇。

實際上，更多地看您的代碼，我發現ajaxResponse也應該是觀察者。 但是，您還是想避開觀察者，所以我要問自己，我何時應該提出AJAX請求並重新渲染圖形？ 我認為答案不會在報告名稱更改時出現。 可能更像是用戶單擊“保存”或“查看”之類的按鈕，在這種情況下，該按鈕應在某處發送一個操作，然后該操作應觸發AJAX調用，然后重新呈現圖形。 但是，這取決於您的應用程序。