从另一个应用程序将参数传递给ember.js的最佳实践是什么。
例如,我需要单击主页上的链接,然后将参数传递给iframe中的ember。
我是通过Cookie来完成的,并循环检查值,但这不是一个好习惯。

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

最佳答案

我将使用window.postMessage()和window.on(“ message”)系统连接两个应用程序。

例如,假设您在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为“ inner_page”。 postMessage调用中的第二个参数是origin,一旦通信开始工作,就应该确保其安全。

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


一些注意事项:


我们的消息具有固定的“类型”属性。现在,这始终是“操作”,但是如果您需要多种通讯协议,则可能会很有用。
您将需要某种方式来获取活动控制器或将消息发送到的路由。在此示例中,每次设置新控制器(App.activeController)时,我都会缓存活动控制器。如果使用此模型,则可能应将其实现为Route Mixin。不知道这在大型应用程序中将如何运作,但是对于此示例来说已经足够了。

关于javascript - 在iframe中将参数传递给 Ember ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25330338/

10-14 13:44
查看更多