0

これはおそらく正当にばかげた質問ですが、Ember の大部分を理解するのを妨げているように感じます。

次のコードでは:

App.IndexRoute = Em.Route.extend({
  skipSidebar: true
});

「skipSidebar:」とは何ですか? javascript プログラミング言語に関しては何ですか? Ember では何ですか?

もう一つの例：

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

「アクティブ化:」および「非アクティブ化:」とは何ですか?

最初の例では、'skipSidebar' を使用してパーシャルをレンダリングしました。

{{#unless skipSidebar}}
   {{partial 'sidebar'}}
{{/unless}}

しかし、なぜそれをしたのか、それが何をしているのかはよくわかりません。

基本的に、ルートとコントローラー内のメソッドのように見えるこれらの名前が表示されますが、それらがどこから来たのかわかりません。私がゴールデンレトリバーであるかのように誰かが私にこれを説明できたら、それは素晴らしいことです. いつ使用できますか? いつ使用する必要がありますか? それらをどのように使用しますか？

4

2 に答える 2

1

オブジェクト指向プログラミングに精通しているとコメントしたので、これは簡単に理解できるはずです。

「skipSidebar:」とは何ですか? javascript プログラミング言語に関しては何ですか? Ember では何ですか?

App.IndexRoute = Em.Route.extend({
  skipSidebar: true
});

ember では、すべてが拡張されます。たとえば、 は のサブクラスでありEmber.Object、Ember.Objectオブジェクト指向スタイルでプログラミングするために必要なすべてのメカニズムを提供する基本クラス オブジェクト (基盤) です。の場合skipSidebar、これは拡張オブジェクトに割り当てられたクラス プロパティであり、前述のようEmber.Routeに のサブクラスでもありEmber.Objectます。だから今あなたが拡張すると想像してくださいApp.IndexRoute：

App.MyFooRoute = App.IndexRoute.extend({
  someFunction: function() {
    this.get('skypSidebar'); // this would retrieve the correct property defined in App.IndexRoute
  }
});

「アクティブ化:」および「非アクティブ化:」とは何ですか?

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

この場合、Ember.Routeには、 によってすでに提供されている基本機能に加えて追加機能があります。Ember.Objectの場合、routeこの追加機能は主にルーティング関連です。開発者の生活を楽にするために、ember はスタブ関数で構成されるいわゆるパブリック API を提供し、この関数がそのライフサイクルで呼び出されたときに通知されるようにオーバーライドできます。この関数は とも呼ばれhooksます。activateとその対応する の場合deactivate、これは、ルートがアクティブになろうとしているときに ember によって呼び出され、呼び出されます。たとえば、ルートが変更されたときに、それぞれ非アクティブになります。

さらに、いくつかの基本的な機能を常に実行したいが、クラスを拡張し、基本的なロジックを失うことなくこれらのフックをオーバーライドしたい場合を想像してくださいthis._super()。

App.BasicRoute = Ember.Route.extend({
  activate: function(){
    alert('route activated');
  },
  deactivate: function(){
    alert('route deactivated');
  }
});

次に拡張しApp.BasicRouteます:

App.DifferentRoute = App.BasicRoute.extend({
  activate: function(){
    this._super();
    // do stuff
  },
  deactivate: function(){
    this._super();
    // do atuff
  }
});

上記の例では、サブクラスで呼び出しactivateたためにdeactivate実行中の親クラスを呼び出し、サブクラスで定義したロジックをさらに実行します。alert(...);this._super()

それが役に立てば幸い。

于 2013-09-04T20:02:26.597 に答える
1

純粋な Javascript 構文の観点から、このコード:

App.IndexRoute = Em.Route.extend({
  skipSidebar: true
});

は、次の Ruby と同等です。

App['IndexRoute'] = Em['Route'].extend( { 'skipSidebar' => true } );

つまり、別のハッシュの要素に対するメソッド呼び出しの結果に、ハッシュの要素 (Javascript ではすべてのオブジェクトが本質的に存在する) を代入し、引数はまだ 3 番目のハッシュであり、これはリテラル形式 ( JSON の基礎)。

実際、Ruby とほぼ同じ形式で JS を作成できます。

App['IndexRoute'] = Em['Route'].extend( { skipSidebar: true } );

... Name.KeyJavascript の構文はName['Key']、キー文字列が有効な識別子である場合に機能する便利なショートカットにすぎないためです。これも機能します：

App['IndexRoute'] = Em['Route']['extend']( { skipSidebar: true } );

Javascript は Python に似ているため、メソッドは実際には単なる属性 (ハッシュ要素) であり、その値は関数/クロージャーです。

ただし、意味的には、これが Ember で行っていることはIndexRoute、オブジェクト (名前空間に使用される) で、Ember 定義のクラス(オブジェクト/名前空間)Appのサブクラスとして というクラスを定義し、デフォルトになるプロパティを追加することです。すべての新しいオブジェクトに対して。機能的には、次の Ruby に似ています。RouteEmskipSidebartrueApp.IndexRoute

class App::IndexRoute < Em::Route
  attr_accessor :skipSidebar
  def initialize
    @skipSidebar = true
  end
end

あなたの2番目の例では：

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

再びサブクラスを定義し (今回はEmber.Routeではなく)、サブクラスでとEm.Routeという 2 つのメソッドを追加またはオーバーライドします。ルビー:activatedeactivate

class App::AboutRoute < Ember::Route
  def activate
    self.controllerFor('application').renderAboutSubNav = true
  end
  def deactivate
    self.controllerFor('application').renderAboutSubNav = false
  end
end
于 2013-09-04T20:14:45.973 に答える