Ember 编辑模板

Question

我有一个 ember 应用程序，它有一个 profiles 路由来显示数据库中特定项目的标题和描述。我想为该数据创建一个edit 页面，就像在 ember 中的 CRUD 中一样。我在profiles 资源路由下实现了edit 路由。

index 模板工作正常，它成功地填充了数据库中的数据，结果显示在模板中。但是，只要我为该路由声明一个控制器并向该控制器添加一个操作，模板就会中断。

这是应用的 app.js 代码。

App.Profile = DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string')
});

App.Router.map(function(){
this.resource("about", function(){
    this.route("create", {path: '/create'});
});
this.resource('profiles', {path: '/profiles/:profiles_id'}, function(){
    this.route('edit');
});
this.resource('login');
this.resource("logout");
});

App.ProfilesController = Ember.Controller.extend();

App.ProfilesRoute = Ember.Route.extend({
model: function(params) {
    NProgress.start();
    var data = App.Profile.find(params.profiles_id);
    data.then(function(){
      NProgress.done();
    });
    return data;
}
});

配置文件的 Html 代码：

<script type="text/x-handlebars" data-template-name="profiles">
  <div class="container">
    <div class="row">
      <h1>{{title}}</h1>
  <p>
    {{description}}
  </p>
  <form {{action edit on="submit"}}>
    {{input value=title type="text" placeholder="Title"}}
    {{textarea value=description}}
    {{input class="button" type="submit" value="Edit"}}
  </form>
</div>
  </div>
</script>

此时一切正常。但是一旦我向 ProfileController 添加编辑操作，当我在浏览器中加载页面时，只会显示没有数据的表单。出了什么问题？

当我将此代码添加到 ProfilesController onyl 时，会显示没有数据的表单：

App.ProfilesController = Ember.Controller.extend({
    edit: function(){
        var self =this, data = this.getProperties('title', 'description');
        self.set('errorMessage', null);
        self.set('successMsg', null);
        Ember.$.put('profiles', data, function(){
            NProgress.start();
        }).then(function(response){
            NProgress.done();
            if(response.success){

            }else {
                self.set('errorMessage', response.message);
                console.log(response.message);
            }
        });
    }
});

我想在提交表单时创建一个动作，触发编辑动作并在服务器上进行放置，我在服务器上有 php laravel 4 后端来以 REST 方式处理请求。

我尝试在配置文件/编辑模板中的编辑模板下实现上述代码，但我无法使其工作，所以我将代码粘贴到配置文件的索引模板中。

Ember 在控制台上显示此日志

生成 -> route:profiles.index 对象 {fullName: "route:profiles.index"} ember-1.0.0.js:356

使用默认视图渲染应用程序 对象 {fullName: "view:application"} ember-1.0.0.js:356

使用默认视图渲染配置文件 对象 {fullName: "view:profiles"} ember-1.0.0.js:356

生成 -> 控制器：profiles.index 对象 {fullName: “控制器：profiles.index”} ember-1.0.0.js:356

找不到“profiles.index”模板或视图。什么都不会 渲染对象 {fullName: "template:profiles.index"} ember-1.0.0.js:356

生成 -> 路由：索引对象 {fullName：“路由：索引”} ember-1.0.0.js:356

生成-> route:about.index 对象 {fullName: "route:about.index"} ember-1.0.0.js:356

Answer 1

几件事：

1. 要将其放入配置文件/编辑模板中，您需要一个定义了 {{outlet}} 的profiles.hbs 模板。这样编辑模板就会显示出来。此外，profiles.hbs 应该在配置文件目录之外。和profiles目录应该包含索引和编辑模板。

2. 我认为它应该是一个 ArrayController 而不仅仅是 Controller。

我认为一旦根据第 1 点进行更改，它应该可以正常工作。试一试。