Question

将参数从另一个应用程序传递给ember.js的最佳做法是什么？例如，我需要点击主页面中的链接并将参数传递给iframe中的ember。我是通过cookie完成的，并检查循环中的值，但这不是一个好习惯。

 setInterval(function(){
      Ember.$.getJSON('/url'+Ember.$.cookie("id")).then(function(response){...});
        }, 500);

Answer 1

我会使用window.postMessage()和window.on（＆＃34; message＆＃34;）系统来连接这两个应用程序。

例如，让我们在您的iFrame中说您有一个可以从集合中显示小部件的余烬应用，在您的主应用中，您有一个ID选择器。以下是这将如何运作。

在您的主应用中：

    App.IndexController = Ember.Controller.extend({
        //... other stuff
        actions: {
            showWidget: function () {
                var id = parseInt(this.get("widgetId"), 10),
                    iframe = $("#inner_page")[0];

                iframe.contentWindow.postMessage(
                    JSON.stringify({ type: "action", args: ["showWidget", id]}),
                    "*");
            }
        }
    });

widgetId是您要传递给iframe的ID（例如，可以绑定到文本字段）。你的iframe会有id＆＃34; inner_page＆＃34;。 postMessage调用中的第二个参数是起源，一旦您使通信工作，您应该考虑保护它。

iframe应用的代码更有趣：

    $(window).on("message", function(e) {
        var message = JSON.parse(e.originalEvent.data),
            handler = App.messageHandlers[message.type];

        if (!handler) {
            consolw.log("WARNING! Invalid action call!");
            return;
        }

        handler(message);
    });

    App.messageHandlers = {
        action: function (msg) {
            if (App.activeController) {
                App.activeController.send.apply(App.activeController, msg.args);
            }
        }
    };

    App.IndexRoute = Ember.Route.extend({
        //...
        setupController: function (controller, model) {
            this._super(controller, model);
            App.activeController = controller;
        }
    });

    App.IndexController = Ember.Controller.extend({
        //...
        actions: {
            showWidget: function (id) {
                // update active widget, load route or whatever
            }
        }
    });

一些注意事项：

我们的消息有一个固定的＆＃34;类型＆＃34;属性。现在，这总是＆＃34;动作＆＃34;，但如果您想要多种通信协议，它可能会很有用。
您需要一些方法来获取发送消息的活动控制器或路由。在此示例中，每次设置新控制器（App.activeController）时，我都会缓存活动控制器。如果你使用这个模型，这应该可以实现为Route Mixin。不确定这在大型应用程序中的效果如何，但对于这个例子来说已经足够了。

将参数传递给iframe中的ember

1 个答案: