0

Emberで「ユーザー」オブジェクトを管理するための基本的なCRUDセットアップを作成しようとしています。モデルとルートが整っていると思います。私は管理に苦労しています：

A）（すべての）ユーザーページの適切なコントローラー設定。ArrayControllerを作成する必要があると思いますが、自動的に正常に動作するようです。私のEmberアプリは、個々の「ユーザー」オブジェクトの配列を作成することを知っていますか？もしそうなら、どのように？

B）InputFieldsからデータを渡す。私の例で「ユーザーの追加」をクリックすると、ユーザーを作成するためのフォームが作成されました。[作成]をクリックすると、textField値を取得する方法がわかりません。また、値を取得した後、それらの値をどう処理するかがわかりません。コントローラを更新するにはどうすればよいですか？

繰り返しますが、ここに私のコードのjsbinがあります。任意のガイダンスをいただければ幸いです。

4

1 に答える 1

2

A）について： アプリの以下のルートを参照していると思います。このモデル関数は配列を返します。したがって、Emberは、UsersRouteをレンダリングするためにArrayControllerを使用する必要があることを認識しています。

App.UsersIndexRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }
});

B）について：コードを更新しました-> http://jsbin.com/ozilam/15/edit

Emberの命名規則に一致するように、いくつかの名前（コントローラーとビュー）を更新する必要がありました。

Emberを使用すると、フォームを使用してそれらの値を手動で読み取る必要はありません。代わりに、ルートを入力するときに新しいレコードを作成します。

App.UsersNewRoute = Ember.Route.extend({
  setupController : function(controller){
    controller.set("content", App.User.createRecord({}));
  }
});

ビュー内では、レコードのプロパティをバインドしています。ご覧のとおり、アクションヘルパーを使用してボタンも更新しました。

<script type="text/x-handlebars" data-template-name="users/new">
        <div class="row">
            <div class="six columns">
                <h3>New User Information</h3>

                    <form>
                        <label>First Name</label>
                        {{view Ember.TextField valueBinding='name_first'}}<br />
                        <label>Last Name</label>
                        {{view Ember.TextField valueBinding='name_last'}}<br />
                        <label>Email Address</label>
                        {{view Ember.TextField valueBinding='email_address'}}<br />
                        <label>SSN</label>
                        {{view Ember.TextField valueBinding='ssn'}}<br />

                        <button {{action create target="view"}} class="button">Create</button>
                        {{#linkTo users}}Cancel{{/linkTo}}
                    </form>

            </div>
        </div>
    </script>

フォーム内のこれらの変更はコントローラーに自動的に伝播されるため、コントローラー内のオブジェクトにアクセスするだけで済みます。

App.UsersNewView = Ember.View.extend({
  didInsertElement: function() {
    this.$('input:first').focus();
  },
  create: function(){
    console.log('view submitted');
    var newUser = this.get("controller.content");
    console.log(newUser.get("name_first"));
    console.log(newUser.get("name_last"));

    // HOW DO I PROCESS THIS FORM

  }
});

注：これを書いているときに、データ変更タスクであるため、ビューではなくコントローラーでこのイベントを処理する方がおそらく良いと思います。

于 2013-03-13T19:26:32.307 に答える