Ember.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 。