Question

过去两天我一直在努力解决这个问题。我找不到在Ember中刷新控制器属性的方法 - 换句话说，让把手模板再次查找控制器属性，而不是缓存旧值。问题与sessionStorage有关。这是代码：

<script type="text/x-handlebars" id="start">
    {{log isLoggedIn}}
    {{#if isLoggedIn}}
        <p>Welcome, <strong>{{controllers.application.name}}</strong>!<br/>
           Your user role is: <strong>{{controllers.application.role}}</strong></p>
    {{else}}
        <p>Unfortunately, you're not logged in so you cannot access this content.</p>
    {{/if}}
</script>

应用程序把手模板有一个登录链接。

这是我的app.js的一部分：

App.ApplicationController = Ember.ObjectController.extend({    
    session: false,
    hasSession: function() {
        var session = window.sessionStorage.getItem("session");
        if (session) {
            this.set("session", true);
            return session.length === 16;
        }
        return false;
    }.property("session"),

App.StartController = Ember.ObjectController.extend({
    needs: ["application"],
    isLoggedIn: function() {
        return this.get("controllers.application.hasSession");
    }.property("controllers.application.hasSession")
});

App.LoginController = Ember.ObjectController.extend({
    username: "deus",
    password: "ha", //TODO: replace with null
    actions: {
        login: function() {
            logIn(this);
        }
    }
});

function logIn(self) {
    $.ajax({
        dataType: "json",
        url: "userValidation.json",
        async: false,
        success: function(data) {
            if (data.status.code === 200) {
                window.sessionStorage.setItem("session", data.users.session);
                window.sessionStorage.setItem("permissions", data.users.permissions);
                window.sessionStorage.setItem("username", data.users.username);
                window.sessionStorage.setItem("name", data.users.name);
            } else {
                alert("Unable to log in! Status code is " + data.status.code.toString());
            }
        }
    }).done(function() {
        //TODO: Move logic here?
    });
}

我已经尝试了所有我能想到的东西。我在Chrome开发人员的控制台中看到会话设置正确。但是，当我导航到start页面时，我得到了＃34;不幸的是＃34;信息。我的控制台日志说会话是错误的。

如果我试试这个：

App.ApplicationController = Ember.ObjectController.extend({
    hasSession: function() {
        return getLoggedIn();
    }
});

function getLoggedIn() {
    var session = window.sessionStorage.getItem("session");
    if (session) {
        return session.length === 16;
    }
    return false;
}

我仍然有相同（或相当类似）的问题 - 导航到start页面仍然显示消息，好像用户没有登录，即使sessionStorage拥有所有内容。但是当我手动刷新页面时，它给了我正确的＃34;欢迎＆＃34;信息。

我该如何解决这个问题？基本上，我需要控制器来理解＆＃34;会话已更改，并意识到用户已登录 - 或者换句话说，我需要刷新控制器的属性（无需重新加载页面）。

Answer 1

Ember没有任何内置的功能来观看会话存储，但这里真的没有必要。您可以在已解决的ajax调用中执行此操作（类似于此）。

App.ApplicationController = Ember.ObjectController.extend({    
    session: '',
    hasSession: function() {
        return this.get('session.length') === 16;
    }.property("session"),

App.StartController = Ember.ObjectController.extend({
    needs: ["application"],
    isLoggedIn: Em.computed.alias("controllers.application.hasSession")
});

App.LoginController = Ember.ObjectController.extend({
    needs: ["application"],
    application: Em.computed.alias("controllers.application"),
    username: "deus",
    password: "ha", //TODO: replace with null
    actions: {
        login: function() {
            var self = this;
            logIn(this).done(function(result){
               var session = result.users.session; // or whatever this is
               self.set('application.session', session);
            });
        }
    }
});

function logIn(self) {
    return $.ajax({
        dataType: "json",
        url: "userValidation.json",
        async: false,
        success: function(data) {
            if (data.status.code === 200) {
                window.sessionStorage.setItem("session", data.users.session);
                window.sessionStorage.setItem("permissions", data.users.permissions);
                window.sessionStorage.setItem("username", data.users.username);
                window.sessionStorage.setItem("name", data.users.name);
            } else {
                alert("Unable to log in! Status code is " + data.status.code.toString());
            }
        }
    })
}

计算属性

Ember的计算属性默认是缓存的，并且是延迟加载的。这意味着重新计算属性的唯一方法是其中一个依赖属性是否已更改。在下面的示例中，如果您要更改条形图，则foo将被标记为脏，然后重新计算（如果被某人观看）;

bar:'asdf',
foo: function(){
  return this.get('bar');
}.property('bar')

在此示例中，如果栏已更改，也只会重新计算。不幸的是，如果baz改变了foo，就不会重新计算。

bar:'asdf',
baz:'fdas',
foo: function(){
  return this.get('bar') + this.get('baz');
}.property('bar')

挥发性计算属性

每次请求时，都会重新计算挥发性计算属性。

bar:1,
foo: function(){
   this.incrementProperty('bar');
   return this.get('bar');
}.property().volatile(),

blah: function(){
  this.get('foo');
  this.get('foo');
  this.get('foo');
}

示例：http://emberjs.jsbin.com/donalabu/1/edit

如何刷新Ember中的控制器属性？

1 个答案:

计算属性

挥发性计算属性