2

タスク:

ライトボックスでフォームを開いて、新しい「イベント」を作成します。開いたフォームはブックマーク可能である必要があります。

障害物:

  1. タグを使用してライトボックスを開く例はありますが{{action}}、独自のルートで開くものは見つかりませんでした。
  2. 古いバージョンの ember.js を使用した例は多数あります。
  3. ember-data と REST に関連するドキュメントはあまりありません (わかっています、わかっています...「本番環境に対応していません」)。

問題:

フォームのフィールドはバッキング モデルに関連付けられていなかったため、「null」がサーブレット (Spring コントローラー) に投稿されていました。

私の最初の反復は、最終結果 (jsfiddle)からそれほど離れていませんでした。最終的にこれを交換して機能させたもの:

EP.EventsNewRoute = Ember.Route.extend({
    ...
    setupController : function(controller, model) {
        controller.set("model", model);
    },
    ...
});

...このため:

EP.EventsNewRoute = Ember.Route.extend({
    ...
    setupController : function(controller, model) {
        this.controllerFor("events-new").set("model", model);
    },
    ...
});

質問:

controllerForモデルを適切にセットアップするためにsetupController 関数を呼び出す必要があるのはなぜですか?


そして最後に、完全に機能する例を見つけるのに苦労したので、これをアクセス可能にしたいと思いました (そして、うまくいけば改善を見つけたいと思いました)。

これがフィドルです:http://jsfiddle.net/6thJ4/1/

ここにいくつかのスニペットがあります。

HTML:

<script type="text/x-handlebars">
    <div>
        <ul>
            {{#linkTo "events.new" tagName="li"}}
            Add Event
            {{/linkTo}}
        </ul>
    </div>
    {{outlet events-new}}
</script>
<script type="text/x-handlebars" data-template-name="events-new">
    <form>
        <div>
            <label>Event Name:</label>
            {{view Ember.TextField valueBinding="name"}}
        </div>
        <div>
            <label>Host Name:</label>
            {{view Ember.TextField valueBinding="hostName"}}
        </div>
    </form>
</script>

JavaScript:

...
EP.Router.map(function() {
    this.resource("events", function() {
        this.route("new");
    });
});
EP.EventsNewRoute = Ember.Route.extend({
    model : function() {
        return EP.Event.createRecord();
    },
    setupController : function(controller, model) {
        //controller.set("model", model); // Doesn't work? Why not?
        this.controllerFor("events-new").set("model", model); // What does this do differently?
    },
    ...
});
EP.EventsNewController = Ember.ObjectController.extend({
    save : function() {
        this.get("content.transaction").commit(); // "content.store" would commit _everything modified_, we only have one element changed, so only "content.transaction" is necessary.
    }
});
EP.EventsNewView = Ember.View.extend({
...
});
EP.Event = DS.Model.extend({
    name : DS.attr("string"),
    hostName : DS.attr("string")
});

資力:

  1. http://emberjs.com/guides/routing/setting-up-a-controller/
  2. http://emberjs.com/guides/getting-started/toggle-all-todos/ (私が学んだことを模倣しようとしていますが、add-new を新しいルートにモーフィングします)
  3. LightboxView を書くと問題が発生する / DOM を統合すると jQuery プラグインを操作するとアクションが使用できなくなる(ライトボックスの「例」)
  4. Ember の信頼できるビュー(別のライトボックスの「例」ですが、ライトボックスを開くためのルートがありません)
4

1 に答える 1