Question

当我转换到我的新路线时，我设置了reportName属性，我希望基于观察reportname更改postobject并触发发送ajax请求。关于ajax的响应我得到的数据我想要传递给我的图形组件作为属性，这个带有数据值的更新属性会导致我的组件中的一个函数被触发。但我不能这样做。你能告诉我我做错了吗？我是ember的新手。 Pod控制器：

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属性中存储的函数 - 因此您不需要该函数。

其次，即使您的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返回该值（而不是将其设置为其他属性），并呈现{ {1}}在模板中而不是其他属性。（不要让drawGraph成为观察者;将其作为计算属性保留。）

如果您正在使用jQuery来操作drawGraph内的DOM，并且出于某种原因无法使用模板，那么观察者可能是唯一的方法。

实际上，更多地查看您的代码，我发现drawGraph也应该是一个观察者。但是，你想再次避免观察者，所以我会问自己，我何时应该发出一个AJAX请求并重新渲染图表？我不认为只要报告名称发生变化，答案就会出现。它可能更像是当用户点击“保存”或“查看”等按钮时，在这种情况下，该按钮应该在某处发送动作，然后该动作应该触发AJAX调用然后重新呈现图形。但是，这取决于你的应用程序。

在Ember

1 个答案: