0

親で呼び出すコンポーネントを作成しましたが、キーパス関数を介してコンポーネントの値を取得しようとすると、値が空になります。コンポーネントのテンプレートでこのキーパスを直接呼び出さない限り、親にまだ存在していても存在しないようです。これを説明するための以下の例。

http://jsbin.com/golen/1/edit?html,js

4

1 に答える 1

1

何が起こっているかというと、それthisはコンポーネントです:

<p>Date: {{ startTime(this) }}</p>

は、チケット コンポーネントのコンテキストではなく、チケット コンポーネントのデフォルト コンテキストを参照します (コンポーネントは独自のデータ コンテンツを取得します)。

ただし、コンポーネントは、そのコンテキストでは見つからないプロパティを親のコンテキストで探します (isolated: trueコンポーネントに が設定されている場合を除き、その場合はそのコンテキストを離れません)。これらのプロパティを見つけると、独自のコンテキストでそれらを「借用」し (すべてを同期させます)、{{JSON.stringify(.)}}チケット コンポーネントに追加することで確認できます。

> Object {title: "1st Release", price: "10.00", startTime: function}

したがって、簡単な修正の 1 つは、sale_startプロパティをコンポーネントで直接使用することです。

<p>Date: {{ startTime(sale_start) }}</p>

または、必要に応じて、関数内のデータにアクセスできます。

startTime: function () {
  return this.get('sale_start');
}

プロパティを渡す、またはget構文を使用する利点は、プロパティの自動更新を取得できることです。コンテキストthisを渡して呼び出しても、値が変更this.sale_startされた場合に自動更新は行われません。sale_start

計算されたプロパティを使用する場合:

computed: {
    startTime: 'humaneDate(${sale_start})'
}

関数の代わりにプロパティとしてテンプレートで参照できます。

<p>Date: {{ startTime }}</p>

もう 1 つのオプションは、チケット データ オブジェクト全体をパラメーターとして明示的に宣言することで、コンポーネント コンテキストに取り込むことです。

<ticket ticket="{{.}}"/>

これは、いくつかのプロパティを書式設定して表示するよりも、コンポーネント内のオブジェクトを頻繁に操作する必要がある場合に有利です。この変更によりticket、チケット コンポーネントのデータ コンテキストにプロパティが作成されるため、チケットのブロックを作成すると便利です。

{{#ticket}}
<div class="ticket">
  <p>Title: {{ title }}</p>
  <p>Price: {{ price }}</p>
  <p>Date: {{ startTime(.) }}</p>
</div>
{{/}}

使用するだけでも問題なく動作しますが ( startTime 関数でsale_startorを使用すると仮定すると:ticket.sale_start

<div class="ticket">
  <p>Title: {{ title }}</p>
  <p>Price: {{ price }}</p>
  <p>Date: {{ startTime(sale_start) }}</p>
</div>
于 2014-05-03T00:09:41.197 に答える