Aurelia <compose> model.bind何が変更イベントをトリガーするのですか？

Question

Aureliaでは、<compose>要素を使用して、ビューモデルとビューを動的に構成することができます。提供されたビューモデルのactivateメソッドを通じてアクセス可能なmodel.bindを介してデータのオブジェクトを提供することもできます。

私の質問は、どのような条件が、提供されたモデルデータの変更イベントを引き起こすかです。私が提供するオブジェクトのプロパティを変更した場合、このオブジェクトを最初のパラメータとして取得する私のactivateメソッドは変更を見ますか？または、オブジェクト全体を置き換えて変更をトリガーする必要はありますか？

Answer 1

activate(model)は、モデルがビューモデルにバインドされているときに一度呼び出されます。モデルの属性が変更されると、それらの変更は、モデルがコピーではなく参照であるため、合成されたビューモデルに反映されます。

たとえば、次のようにルートのターゲットとなるビュー/ビューモデルがあるとします（この例は、他のものも試していたので完全にクリーンな例ではありませんが、十分にはっきりしているはずです） ：

ビュー：このビューでは、2つのセクションが<hr>で区切られて作成されます。上部には各ビューのmodel.messageが表示されます。下部は、各ビューに対して<compose>を作成します。

View Model：openViewsはグローバルスコープにあります。これは、ルートから離れてルートに戻ると、view.modelの変更が保持されるようにするためです。モデルがZenStudioオブジェクトの場合、オブジェクトは破棄され、ルートが移動してこのビューに戻り、データが失われると再作成されます。次のように

var openViews = [ 
    { viewType: "", model: { message: "View 1"}}, 
    { viewType: "", model: { message: "View 2"}}, 
    { viewType: "", model: { message: "View 3"}} 
]; 

export class ZenStudio { 
    constructor() { 
    } 

    created() { 
    } 

    get openViews() { 
    return openViews; 
    } 

    getViewFromType(view) { 
    // TOOD Load plugins and use the views defined by plugins 
    return "./views/editor-view"; 
    } 
} 

エディタビュービューとビュー・モデルは、以下のとおりです。

<template> 
    <h1>${model.message}</h1> 
    <form> 
    <input type="text" value.bind="model.message"> 
    </form> 
</template> 

ビューモデル：

export class EditorView { 
    constructor() { 
    } 

    created(owningView, thisView) { 
    this.view = thisView; 
    this.parentView = owningView; 
    } 

    activate(model) { 
    // Keep track of this model 
    this.model = model; 
    } 
} 

あなたはZenStudioビューが同じが表示されていることがわかりますEditorViewとしてmodel.messageとなります。ユーザーが<input>内のメッセージの値を編集すると、値は対応する<compose>ビュー内と同様に最上位ビューでも正しく変化します。

例はありませんが、openViewsリストに別の項目を追加すると、別のサブビューが追加され、トップレベルビューの別の行に新しいメッセージが表示されます。 repeat.forは、リストに加えられた加算と減算を待ち受け、正しく合成された要素を作成/削除します。

あなたの質問にはうまくいきます。