Question

我正在使用带有OAuth系统的Ember.js构建应用程序。我有这个按钮供我的用户登录：http://imgur.com/C8x70ZX

我的用户登录后，会更改为此下拉列表： http://imgur.com/cGTsMzA

问题是，这目前仅在页面重新加载后才有效。由于我正在构建单个页面，动态应用程序，这是我不想要的。

这是我使用的实现：

{{#if isNotLoggedIn}}
        <li class="has-form" id="logInButton"><button onclick='FBLogin()'>Connect with Facebook</button></li>
{{else}}
        <li class='has-dropdown not-click'>
          <a href='#'><img class='profilePicture' {{bind-attr src=pictureLinkSquare}} height='25px' width='25px' /> Welcome, {{firstName}} {{lastName}}!</a>
            <ul class='dropdown'>
              <li>{{#link-to 'profile'}}Profile{{/link-to}}</li>
              <li><a href="#" onclick="FBLogout()">Sign Out</a></li>
            </ul>
        </li>
{{/if}}

那么，我将如何动态更改该按钮，我该怎么用呢？我可以使用ember实现这个（我正在查看{{action}}帮助程序吗？）或者使用jQuery之类的东西来完成这个任务会更好吗？

这是我的第一个小型单页项目，所以我觉得有点迷失。

Answer 1

创建JSBin示例有助于更好地理解您的查询。但是根据我的理解，你不会将'isNotLoggedIn'标记为计算属性，可能会在控制器中监视一些控制登录状态的属性。看看示例@ http://emberjs.com/guides/object-model/computed-properties/ 在示例中，通过将监视放在基本属性'.property（'firstName'，'lastName'）'上，特别注意fullName计算属性的结束方式。通常在错过时，计算属性不会立即“刷新”。

希望这有帮助！

使用Ember / jQuery / JS进行动态页面操作

1 个答案: