js -如何绑定一个对象值与控制器的属性

Question

Ember.js新手问题:

什么是最好的方法(如果可能的话)，绑定一个对象值与控制器的属性?

假设我们有这段代码:

App.Stalker = Ember.Mixin.create({
  init: function() {
    this._super();
    var props = this.get('watchProperties');
    Ember.assert("watchProperties should be an array", Ember.isArray(props));
    props.forEach(function(property) {
      Ember.addObserver(this, property, this, '%@Changed'.fmt(property));
    }, this);
  },
  willDestroy: function() {
    this._super();
    this.get('watchProperties').forEach(function(property) {
      Ember.removeObserver(this, property, this, '%@Changed'.fmt(property));
    }, this);
  }
});
App.states = Ember.Object.createWithMixins(App.Stalker, {
  watchProperties: 'state'.w(),
  stateChanged: function() {
    console.log("idle changed");
  }
});
App.IndexController= Ember.Controller.extend({
  state: *// How do I bind with App.states.state*,
  contentDidChange: function() {
    console.log('idle !!!');
    this.transitionToRoute("idle");
  }.observes('state')
    });
// Here is use a jQuery plugin to check if the User of the app goes in the idle mode
App.IndexView = Ember.View.extend({
  didInsertElement : function(){
    self = this;
    this._super();
    $( document ).on( "idle.idleTimer", function(event, elem, obj){
        App.states.set('state', 'idle');
        console.log(self.get("controller.state"));
        });
  }
});

Answer 1

这将使您的示例工作…的。

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    lazyState: function (state) {
      console.log("lazyState: " + state);
      switch (state) {
        case "idle":
          this.transitionTo("lazy");
          break;
        case "active":
          this.transitionTo("index");
          break;
        default: throw new Error("Invalid state");
      }
    }
  }
});
App.LazyView = Ember.View.extend({
  _handler: null,
  didInsertElement : function(){
    console.log("insert lazy");
    var self = this;
    this._super();
    var handler = function (event, elem, obj) {
      Ember.run(function () {
        self.get("controller").send("lazyState", "active");
      });
    };
    $(document).on("active.idleTimer", handler);
    this.set("_handler", handler);
  },
  willDestroyElement: function() {
    $(document).off("active.idleTimer", this.get("_handler"));
    this.set("_handler", null);
  }
});
// Index Views functionality
App.IndexView = Ember.View.extend({
  _handler: null,
  didInsertElement : function(){
    console.log("insert index");
    self = this;
    this._super();
    var handler = function (event, elem, obj) {
      Ember.run(function () {
        self.get("controller").send("lazyState", "idle");
      });
     };
    $(document).on("idle.idleTimer", handler);
    this.set("_handler", handler);
  },
  willDestroyElement: function () {
    $(document).off("idle.idleTimer", this.get("_handler"));
    this.set("_handler", null);
  }
});

JSBin

我把它变成了一个工作订单，但是我几乎没有把它作为答案发布。在我看来，这既不是最出色的实现，也不是正确的方法。要从这里继续，您需要将IndexView的实现重构为某种Mixin，或者将其移动到ApplicationView。然后你需要实现一些方法来保存当前位置时，进入'空闲'模式，所以你不总是回到索引…

坚持足够长的时间，我想你会找到我认为正确的解决方案:根本不使用路由和视图。

根据你的描述，你所需要的只是在用户空闲时显示某种屏幕保护程序。你不需要换路线。在空闲屏幕上没有用户交互。相反，只要将空闲屏幕的DOM渲染到主布局中的隐藏div中，并使用jQuery在用户空闲时显示/隐藏它。或者将其放入#if isIdle块并从全局事件处理程序更改isIdle。