Javascript 在Emberjs中-定义实现身份验证的模型_Javascript_Ember.js

Javascript 在Emberjs中-定义实现身份验证的模型

javascript ember.js

Javascript 在Emberjs中-定义实现身份验证的模型,javascript,ember.js,Javascript,Ember.js,我尝试理解Emberjs已经有一段时间了，我已经在Getting Started链接上完成了“to Do”应用程序，我已经阅读了所有文档，并且从“Ember in Action”一书中编写了博客现在我试着自己做一些事情，结果发现我有各种各样的问题，所以我将从这篇文章的第一个开始我提出了以下模板： <body> <script type="text/x-handlebars" data-template-name="user-navigation">

我尝试理解Emberjs已经有一段时间了，我已经在Getting Started链接上完成了“to Do”应用程序，我已经阅读了所有文档，并且从“Ember in Action”一书中编写了博客

现在我试着自己做一些事情，结果发现我有各种各样的问题，所以我将从这篇文章的第一个开始

我提出了以下模板：

<body>
    <script type="text/x-handlebars" data-template-name="user-navigation">
        <ul id="userNavigation">
            {{#if isAuthenticated}}
                <li>Welcome {{userName}}</li>
                <li>{{#link-to "awesome.index"}}logout{{/link-to}}</li>
                <li><a href="#">Settings</a></li>                   
            {{else}}
                <li>{{#link-to "awesome.login"}}login{{/link-to}}</li>
                <li><a href="#">sign up</a></li>
            {{/if}}
        </ul>
    </script>       

    <script type="text/x-handlebars" data-template-name="awesome/index">
        {{#if isAuthenticated}}
            <section id="userWidgets">
                <div>
                    <button id="createNewWidget">Create New Widget</button>
                </div>
                <div>
                    <ul>
                        {{#each widget}}
                            <li><a href="#">{{widgetName}}</a></li>
                        {{/each}}
                    </ul>
                </div>
            </section>
            <section id="selectedWidget">
            </section>          
        {{else}}
            <div id="welcome">Welcome to my awesome Site. You should sing up!</div>
        {{/if}}
    </script>

    <script type="text/x-handlebars" data-template-name="awesome/login">
        <ul id="mainLoginOptions">
            <li><button class="link-button" {{action 'facebookLogin'}}>Login with Facebook</button></li>
        </ul>
    </script>

    <script type="text/x-handlebars" id="application">
        <header id="siteHeader">
            <div id="logo" class="index-logo">My awesome SPA</div>
            <div id="userData" class="index-userdata">
                {{render "user-navigation" user}}
            </div>
        </header>
        <section id="mainContent">              
            {{outlet}}
        </section>
        <footer id="footer" class="index-footer"><div class="index-footer-content">Copyright 2014</div></footer>
    </script>
</body>

不多，但基于该链接，我正在设置一个直接在应用程序中定义的“用户”对象，但我不知道如何将其发送到模板，以便他们使用它正确地呈现自己

当然，我的想法是，在某个时候，我将使用一个服务从不同的社交网络获取代币，但第一步是了解余烬是如何工作的，为此我正在尝试存根对象

非常感谢您的指点。

您有两个选择，我可以考虑

第一个选项是直接在模板中使用

User

对象。Ember.js中的Handlebar模板将大写变量名解释为全局变量。因此，在模板中，您应该能够执行以下操作：

window.Awesome = Ember.Application.create({
    LOG_TRANSITIONS: true
});

Awesome.Router.map(function() {
    this.resource("awesome", {path: "/"}, function(){
        this.route('login');
    });
});

Awesome.AwesomeLoginRoute = Ember.Route.extend({
    actions:{
        facebookLogin: function(){
            var router = this;

            Awesome.User = Ember.Object.create({
                id: "1",
                isAuthenticated: "true",
                userName: "Serge"           
            });

            router.transitionTo('awesome.index');
        }
    }
});

{{#if Awesome.User.isAuthenticated}}{{/if}}

选项二是将该对象用作要在其中使用数据的路线的模型。例如：

Awesome.AwesomeIndexRoute = Ember.Route.extend({
    model: function() {
        return Awesome.User;
    }
});

现在，您的

awesome/index

模板的上下文是您的用户对象，因此上面的代码应该可以工作

{{#if isAuthenticated}}{{/if}}

对于初学者来说，前一种方法更容易一些，所以我现在推荐这种方法。随着您对Ember.js的了解越来越深入，您将看到一些更好的模式，但这是一个小步骤，对吗？：）

另外，您正在将

isAuthenticated

属性设置为

“true”

（字符串值）。您可能应该使用布尔值<代码>“true”将按您所期望的方式工作，但是

“false”

在Javascript中是一个真实的值（所有非空字符串都是），因此您的

else

案例将永远不会执行。

结果表明，要实现这一点，必须发生很多事情

为了找到答案，我采取了以下措施：

GJK的回答
已接受答案上的链接来自
还包括使用Ember进行身份验证

在把所有的东西放在一起之后，我想到了以下几点：

模板有点变化：

<body>
        <script type="text/x-handlebars" data-template-name="_user-navigation">
            <ul id="userNavigation">
                {{#if Awesome.authToken}}
                    <li>Welcome {{Awesome.User.userName}}</li>
                    <li><button class="link-button" {{action 'logout'}}>logout</button></li>                    
                    <li><a href="#">Settings</a></li>                   
                {{else}}
                    <li>{{#link-to "awesome.login"}}login{{/link-to}}</li>
                    <li><a href="#">sign up</a></li>
                {{/if}}
            </ul>
        </script>       

        <script type="text/x-handlebars" data-template-name="awesome/index">
            <div id="welcome">Welcome to my awesome Site. You should sing up!</div>
        </script>

        <script type="text/x-handlebars" data-template-name="awesome/login">
            <ul id="mainLoginOptions">
                <li><button class="link-button" {{action 'facebookLogin'}}>Login with Facebook</button></li>
            </ul>
        </script>

        <script type="text/x-handlebars" data-template-name="widgets">
            <section id="userWidgets">
                <div>
                    <button id="createNewWidget">Create New Widget</button>
                </div>
                <div>
                    <ul>
                        {{#each Awesome.User.widgets}}
                            <li><a href="#">{{widgetName}}</a></li>
                        {{/each}}
                    </ul>
                </div>
            </section>
            <section id="selectedWidget">
            </section>                  
        </script>

        <script type="text/x-handlebars" id="application">
            <header id="siteHeader">
                <div id="logo" class="index-logo">My awesome SPA</div>
                <div id="userData" class="index-userdata">
                    {{partial "user-navigation"}}
                </div>
            </header>
            <section id="mainContent">              
                {{outlet}}
            </section>
            <footer id="footer" class="index-footer"><div class="index-footer-content">Copyright 2014</div></footer>
        </script>
    </body>

此练习仍需要大量工作，但至少验证部分开始看起来不错，希望这将帮助其他人。

感谢您的回答，但不幸的是，这些选项似乎都不起作用。当我尝试从AwesomeIndexRoute返回模型时，我尝试调用{{render“user navigation”user}}和{{render“user navigation”model}}，两者都不起作用。没有任何其他代码在发挥作用，只有我在文章中包括。我可能做错了什么？这个对我来说似乎没问题。当使用渲染辅助程序时，后者可能会变得有点毛茸茸的，这就是我建议使用前者的原因。通过尝试几件事，我最终只在“AWESOME/INDEX”模板上使用了第一个选项，它起了作用，但如果我在“_user-navigation”部分完全以同样的方式限定对象，那么它们都不起作用。如果我再次尝试第二个选项，只检查“AWESOME/INDEX”模板并删除部分中的条件，它会再次工作，但一旦我重新添加条件，它就会停止工作。我不确定会发生什么。你能在JSBin中重现这个问题吗？

window.Awesome = Ember.Application.create({
    LOG_TRANSITIONS: true,
    authToken: localStorage['authToken']
});

Awesome.ApplicationRoute = Ember.Route.extend({
    actions:{
        logout: function(){
            var router = this;

            Awesome.set('authToken', null);
            delete localStorage['authToken'];
            router.transitionTo('awesome.index');
        }
    }
});

Awesome.Router.map(function() {
    this.resource("awesome", {path: "/"}, function(){
        this.route('login');
    });
    this.resource("widgets");
});

Awesome.AwesomeLoginRoute = Ember.Route.extend({
    actions:{
        facebookLogin: function(){
            var router = this;

            //First call a service that authenticates the user and returns the token.
            Awesome.set('authToken', '123456789');

            //Then add the logic which will get the user's data. Most likely it should be a transition to another route.
            Awesome.User = Ember.Object.create({
                id: "1",
                userName: "Serge",
                widgets: [{widgetName: "Great Widget"},{widgetName: "Fantastic Widget"},{widgetName: "Brutal Widget"}]
            });

            router.transitionTo('widgets');
        }
    }
});