0

我正在尝试创建一个基本的 CRUD 设置来管理 Ember 中的“用户”对象。我想我有我的模型和路线。我正在努力管理：

A）（所有）用户页面的正确控制器设置。我认为我应该创建一个 ArrayController，但它似乎自动工作正常。我的 Ember 应用程序是否知道制作一组单独的“用户”对象？如果是这样，如何？

B) 从 InputFields 传递数据。如果您在我的示例中单击“添加用户” ，我已经制作了一个表单来创建用户。当您单击“创建”时，我不确定如何获取 textField 值，也不知道一旦获得这些值该如何处理。我将如何更新我的控制器？

同样，这里是我的代码的jsbin。任何指导将不胜感激。

4

1 回答 1

2

关于A）： 我假设您指的是您的应用程序的以下路线。此模型函数返回一个数组。因此 Ember 知道它应该使用 ArrayController 来呈现您的 UsersRoute。

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 回答