0

我想在基于 Rails 模型的 Backbone 视图中创建表单字段以及 Rails 模型验证，而不需要模板。为此，我使用了 JBuilder，例如：

1 json.(@recipient, :firstName,
2       :lastName,
3       :street1,
4       :street2,
5       :city,
6       :state,
7       :zip,
8       :phone1,
9       :phone2)
10 json.required Recipient.validators[0].attributes
11 json.fields Recipient.accessible_attributes.reject {|x| x==""}
12 json.states [ 
13               ['Alabama', 'AL'],
14               ['Alaska', 'AK'],
15               ['Arizona', 'AZ'],
16               ['Arkansas', 'AR'],
                 ...
64               ['Wyoming', 'WY']
65             ]

我敢肯定，你可以看到我要去哪里...

因此，目标是遍历字段并将我的输入附加到 DOM，并根据 model.required 数组进行相应的样式设置。当然，states 字段可以动态地将选项插入到状态选择的选择中。验证肯定只是由服务器对错误的响应真正执行（实际上并不关心在客户端上执行此操作，但我想我可以），只需读取错误响应即可。

所以这个问题，我猜应该是：

1) 我是否只在 View 构造函数中实例化 Backbone 模型？

2）你会这样做吗：

this.model.fetch({url:'/recipients/new', 
  success:function(index,model)
   {
     this.model = model.responseText
   }
});

更好的方法来做到这一点？我确实看到了 powmedia/backbone-forms虽然这对我来说似乎是双重工作，而且我必须解决其他事情，当然，我必须重新定义客户端上的所有内容。

如果仅此而已，至少这对于其他有类似想法的人来说是一个参考点（我找不到任何关于此的内容）

可能的解决方案？

咖啡稿：

1 class Senditbacklater.Models.Recipient extends Backbone.Model
2   
3   url: '/recipients'
4   
5   initialize: ->
6     $.getJSON('/recipients/new', (data) =>
7       $.each(data, (key,val) =>
8         obj = {}
9         obj[key] = val
10         this.set(obj)
11       ) 
12     )

然后我应该很好去在 Views 渲染中创建表单

4

1 回答 1

0

你的情况并不特殊，你唯一需要做的就是改变你的观点：你只是在处理一个Model必须从服务器获取并在View.

渲染非常复杂，这是真的，你必须在你的视图代码中工作来解决它。

你可以尝试这样的事情：

// code simplified and no tested
var MyForm = Backbone.Model.extend({
  url: "/recipients/new"
});

var MyFormView = Backbone.View.extend({
  initialize: function(){
    this.model.on( "reset", this.render, this );
  },

  render: function(){
    _.each( this.model.fields, function( field ){
      this.$el.find( ".fields" ).append( "<label>" + field + "</label><input name=\"" + field + "\" />" );
    }, this );

    // ... more render logic here

    return this;
  }
});

var myForm = new MyForm();
var myFormView = new MyFormView({ el: "#form", model: myForm });

此代码取决于这样的 HTML：

<form id="form">
  <div class="fields"></div>
</form>

当然，这是一个非常简化的示例，还有更优雅的解决方案，例如为任何领域的家族委派子视图，但我只是想为您提供一个起点。

于 2012-08-14T10:19:11.183 回答