Ember 编辑表单模板填充和更新值

Question

这个想法是让一个表单填充当前路由的对象属性，使用户能够更新属性并提交更改。但是，我似乎无法访问控制器中的属性，即使我可以让它们很好地显示在模板中。由于我使用的是 Ember-CLI，这里是相关文件。

我发现控制器的 Ember 文档讨论了使用 setupController 在路由中设置控制器的模型。然而，这并没有奏效。现在我完全没有想法了。

如果您想以更清晰的形式查看它，GitHub Repo 也是最新的。

路由器

// router.js
import Ember from 'ember';

var Router = Ember.Router.extend({
    location: EmberWbsENV.locationType
});

Router.map(function () {
    this.route('index', { path: '/' });
    this.route('items');
    this.resource('edit', { path: 'items/:item_id/edit' });
    this.route('new', { path: 'items/new' });
});

export default Router;

路线

// routes/edit.js
import Ember from 'ember';

export default Ember.Route.extend({
    model: function(params){
        return this.store.find('item', params.item_id);
    },
    setupController: function(controller, item) {
        controller.set('model', item);
    }
});

控制器

// controllers/edit.js
import Ember from 'ember';

export default Ember.ObjectController.extend({
    // variables for form values
    wbsCode: this.get('model.code'),
    wbsAbbrev: this.get('model.abbrev'),
    wbsDesc: this.get('model.desc'),
    wbsIsSuffix: this.get('model.isSuffix'),

    actions: {

        // exit without changing anything
        cancel: function () {
            this.transitionToRoute('items');
        },

        // process new wbs item submissions
        save: function () {

            // set values from form to current instance model
            this.set('code', this.wbsCode);
            this.set('abbrev', this.wbsAbbrev);
            this.set('desc', this.wbsDesc);
            this.set('isSuffix', this.wbsIsSuffix);

            // save item instance into data store and return to items list
            this.save().then(function () {
                this.transitionToRoute('items');
            });

        },

        // remove the current wbs item
        remove: function () {
            // TODO: create delete/remove method
            this.transitionToRoute('items');
        }
    }
});

模板

{{! templates/edit.js }}
<form class="form-horizontal" role="form">
    <div class="col-sm-offset-2">
        <h1>Edit {{abbrev}}</h1>
    </div>
    <div class="form-group">
        <label for="wbs-code" class="control-label col-sm-2">Code</label>
        <div class="col-sm-2">
            {{input type="text" class="form-control" id="wbs-code" placeholder="C04416" tabindex="1" autofocus="true" value=wbsCode}}
        </div>
    </div>
    <div class="form-group">
        <label for="wbs-short" class="control-label col-sm-2">Short Description</label>
        <div class="col-sm-2">
            {{input type="text" class="form-control" id="wbs-short" placeholder="ARC4" tabindex="2" value=wbsAbbrev}}
        </div>
    </div>
    <div class="form-group">
        <label for="wbs-long" class="control-label col-sm-2">Long Description</label>
        <div class="col-sm-8">
            {{input type="text" class="form-control" id="wbs-long" tabindex="3" placeholder="ArcGIS 4: Sharing Content on the Web" value=wbsDesc}}
        </div>
    </div>
    <div class="form-group">
        <label for="is-suffix" class="control-label col-sm-2">WBS code suffix</label>
        <div class="col-sm-8">
            {{input type='checkbox' class='glyphicon glyphicon-unchecked' id='is-suffix' tabindex='4' checked=wbsIsSuffix}}
        </div>
    </div>
    <div class="col-md-offset-2">
        <buton type="button" {{action 'cancel'}} class="btn btn-default">
            <span class="glyphicon glyphicon-remove-circle"></span> Cancel
        </buton>
        <button type="button" {{action 'save'}} class="btn btn-primary">
            <span class="glyphicon glyphicon-save"></span> Save
        </button>
        <button type="button" {{action 'remove'}} class="btn btn-danger">
            <span class="glyphicon glyphicon-warning-sign"></span> Delete
        </button>
    </div>
</form>

Answer 1

不是完整的答案，但可以帮助您入门：

来自 ember 文档：

如果 [a form's attributes ]attributes 设置为带引号的字符串，则它们的值将直接设置在元素上。但是，如果不加引号，这些值将绑定到模板当前呈现上下文中的属性。例如：

这是一个可以做类似事情的表单示例：

{{input type="text" placeholder=OriginalValue value=newValue action="submitProperty"}}

<button class="btn btn-default" name='commit' {{action 'submitProperty' newValue}}

我认为您可能希望表单有一个占位符，其中包含给定属性的初始属性值。然后是一个动作，它将输入到表单中的新值传递到一个更新属性的控制器动作中。

还可以考虑尝试在 js.bin 中设置问题：http://jsbin.com/ 并在其中设置问题以获得更好的响应。