0

初めての ember.js アプリを作成しようとしています。カレンダー-

私の日のモデル

App.Day = Ember.Object.extend({
today : null,
dayNumber : null,
addEvent : function()   {
    console.log(this);
    $("#myModal").modal('show');
}
});

html ビュー

<div class="cal">
    {{#each App.DayList}}
        {{#if this.today}}
        <div class="day today" {{action "addEvent" target="model" }}>
            {{#with this as model}}
            <span class="text">{{this.dayNumber}}</span>
            {{/with}}
        </div>
        {{else}}
        <div class="day" {{action "addEvent" target="model" }}>
            {{#with this as model}}
            <span class="text">{{this.dayNumber}}</span>
            {{/with}}
        </div>
        {{/if}}
    {{/each}}
    </div>

そのため、クリックした日にブートストラップ ダイアログを表示し、extern データをロードしませんが、クリックした日に関する情報が必要です。

私の理解は、ビューを作成することです

  App.DayDetails = Ember.View.extend({

});

このビュー内で ajax リクエストを送信しますが、このビュー内でクリックされた日に関する情報を取得するにはどうすればよいですか?

4

1 に答える 1

2

ビューで AJAX を実行することはほとんどありません。

ビューは次の 2 つのことを行います。

(1) 自分を描く

(2) UI イベント (クリック、入力など) に応答する

ビューはコントローラーからコンテンツを取得する必要があります。この場合は、App.DayController または DayDetailsController だと思います。View(それは別のことです。サブクラスをorなどで終了するのがベスト プラクティスControllerなので、サブクラスが何をするかは一目瞭然です)。

コントローラーがそのデータをどこから取得するかは、物事が複雑になる可能性がある場所です。理想的には、成熟したアプリでは、照会されるデータ ストア (サーバー側データベースと ActiveRecord (レールを使用している場合) の概念上の組み合わせ) が必要です。ただし、単純に言えば、jQuery を使用して ajax リクエストを手動で処理する責任をコントローラーに持たせることができます。近道をしている限り、ビューだけでなく、さまざまな場所 (シングルトン コントローラー、日固有のアイテム コントローラー、日モデル自体) にそのような呼び出しを配置できます。そして、伝染を制限するためにこれらの種類の近道を取ることが重要です...手動の ajax で行う必要があるのは、JSON を取得し、それを次のコンテンツとして設定することにより、すぐに迅速に ember エコシステムに戻すことだけです。アレイコントローラー。すなわち、手動でビューにデータを挿入しようとするなどして、1 つまたは 2 つの手順を進める必要はありません。避けられるなら、Ember と戦わないでください。

いくつかのこと：

(1)ステートメントのように、あなたの使用thisは不必要です。{{with}}ブロック内では{{each}}、コンテキストは反復の現在のオブジェクト (または、itemController を使用している場合はそのラッピング コントローラー) になります。(「x in y」構文を使用しない限り、その場合はコンテキストがコントローラーのままです)

(2) モデルは DOM を変更しようとしてはなりません。代わりに、バインディングとコントローラーに依存して、UI の変更を調整します。あなたがやりたいことはApp.DayController、あなたが着ることができるものを持っていることですaddEvent。{{each}}itemController="App.DayController".

App.DayController = Ember.ObjectController.extend({
    addEvent: function () {
        // ...
    }
});

次に、{{each}}テンプレートの各ループのコンテキストは、個々の日のコントローラーになります。コントローラーは自動的にビューのターゲットおよびコンテキストになるため、テンプレートは次のようになります。

{{#each App.DayList itemController="App.DayController"}}
    <div {{bindAttr class=":day today"}} {{action addEvent}}>{{dayNumber}}</div>
{{/each}}

( :inは常にクラスになることを:day意味しますが、コンテキストのプロパティが true の場合にのみクラスになります)daytodaytoday

毎日addEventが独自のコントローラーに送信されるため、ロードする日を把握する必要はありません。

于 2013-03-06T12:23:15.680 に答える