在 Ember 中触发组件中的功能答案

【问题标题】：triggering a function in component in Ember在 Ember 中触发组件中的功能
【发布时间】：2016-03-09 21:26:41
【问题描述】：

当我转移到我的新路线时，我设置了 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'),

【问题讨论】：

你考虑过ajaxResponse方法的异步行为吗？
Ajax 响应的行为是我主要关心的问题。我正在寻找的是用我从 Ajax 请求返回的数据来绘制我的图形组件

标签： javascript ajax ember.js

【解决方案1】：

首先，您的Ember.set(this,'graphobject', graphobj); 行实际上覆盖了您存储在graphobject 属性中的函数——因此您不需要该函数。

其次，即使您的 drawGraph 属性被标记为脏，因为它的依赖键之一已更改（在您的代码中似乎就是这种情况），直到某些代码 gets 属性才会运行。如果模板本身访问属性，或者从观察者访问或运行操作时，则可能在重新渲染期间发生这种情况。

尝试让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 成为观察对象；将其保留为计算属性。）

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

其实，多看你的代码，我发现ajaxResponse 也应该是一个观察者。但是，您又想避免观察者，所以我会问自己，我应该什么时候发出 AJAX 请求并重新渲染图形？我认为无论何时报告名称更改，答案都不会出现。这可能更像是当用户单击“保存”或“查看”之类的按钮时，在这种情况下，该按钮应该在某处发送一个动作，然后该动作应该触发 AJAX 调用，然后重新渲染图形。但是，这取决于您的应用。

【讨论】：