0

ドキュメントでは、最初のビューの例は次のようになります。

HTML:

<html>
  <head>
    <script type="text/x-handlebars" data-template-name="say-hello">
      Hello, <b>{{view.name}}</b>
    </script>
  </head>
</html>

JS:

var view = Ember.View.create({
  templateName: 'say-hello',
  name: "Bob"
});

たぶん私はマペットですが、何が起こっているのか本当にわかりません. 誰かが助けてくれますか。

{{view}}{{view}}アクションとイベントがjavascriptのビュー定義から適用されるいくつかのhtml /ハンドルバーの周りのケースを理解しています。{{view MyApp.thingView}}また、ビューで指定されたテンプレートをビュー ヘルパーが使用される場所にレンダリングする (ビュー定義で使用可能なプロパティを作成するだけでなく)ブロックレス シングルを使用できることにも感謝します。

ビューのインスタンス化ですか。{{view.x}}そうであれば、なぜこの例では拡張ではなく作成を使用するのですか。または、グローバル var ビューを参照するビューです (これはハンドルバーなので、そうではないと思います)。このフォームは、ビュー定義がテンプレートに設定されているテンプレート内のビューのプロパティにアクセスできると言っているだけtemplateNameですか?

明確にしていただきありがとうございます

更新: 例をもう一度見てみると、var が他のスニペットのプログラムによる追加に使用されているように見えます。したがって、これは、2 つの {{view App.aView}}{{/view}} 要素とビュー内にテンプレートを配置するようなものであると想定できます。form を使用すると、App.aView 内のプロパティを取得できます。

4

1 に答える 1

1

<アップデート>

質問の更新に応じて：

{{#view App.SomeView}} ... {{/view}}そのビューにテンプレートが関連付けられていない場合に使用する必要があります。一方、{{view App.SomeView}}命名規則またはtemplateNameプロパティを介してこのビュー用にテンプレートが作成されている場合は、使用する必要があります。例：

{{view Ember.TextField valueBinding="view.userName"}}

</アップデート>

Handlebars テンプレートで表示{{view.propertyName}}される場合、それは現在のビューからプロパティを消費/レンダリングしていることを意味するため、最初の仮定は一種の正しいものです。例えば：

App = Em.Application.create();

App.HelloView = Em.View.extend({
    welcome: 'Willkommen',
    userName: 'DHH',
    greeting: function() {
        return this.get('welcome') + ' ' + this.get('userName');
    }.property('welcome', 'userName')
});

次に、アプリケーション テンプレートで:

<script type="text/handlebars">
<h1>App</h1>
{{#view App.HelloView}}
    {{view.greeting}}
{{/view}}
</script>

この場合、パーツはそのビュー ( ){{view.greeting}}のスコープで指定されたプロパティ(これらのプロパティのいずれでも同じ) を検索し、親ビュー (暗黙的に示されます) は検索しません。ビューで定義されたプロパティを呼び出すたびに使用する必要があります。コントローラーで定義されたプロパティには、プレフィックスなしで直接アクセスできます。HelloViewgreetingApplicationView{{view.propertyName}}

この理由の 1 つは、正しいプロパティを呼び出していることを確認することです。次の点を考慮してください。

App = Em.Application.create();

App.ApplicationView = Em.View.extend({
    userName: 'David'
});

App.HelloView = Em.View.extend({
    welcome: 'Willkommen',
    userName: 'DHH',
    greeting: function() {
        return this.get('welcome') + ' ' + this.get('userName');
    }.property('welcome', 'userName')
});

これで、アプリケーション ビューと内部ビューの両方が、userNameわずかに異なるものを表す名前のプロパティで定義されました。どれがどれであるかを区別するために、viewおよびparentViewキーワードを使用してプロパティにアクセスできます。

<script type="text/handlebars">
<h1>App</h1>
<!-- this comes from the ApplicationView -->
<h3>{{view.userName}}'s Profile</h3> 
{{#view App.HelloView}}
    <!-- this comes from the HelloView -->
    {{view.welcome}} {{view.userName}}
{{/view}}
</script>

この例で本名とニックネームを使用したい/使用する必要がある場合は、次のようにする必要があります。

<script type="text/handlebars">
<h1>App</h1>
{{#view App.HelloView}}
    <!-- this comes from the ApplicationView -->
    <h3>{{parentView.userName}}'s Profile</h3> 
    <!-- this comes from the HelloView -->
    {{view.welcome}} {{view.userName}}
{{/view}}
</script>

関連参照:

于 2013-03-28T21:47:59.993 に答える