标签: backbone-forms

我有一对多的关系,我正试图用Backbone-Forms建模我无法工作.

这个想法是有很多foos连接到一个酒吧.捕获的是每个酒吧必须至少有一个foo.我希望能够有一个单独的表单,您可以在其中创建一个条形图,以及您想要的多个foos附加到该条形图.Backbone-Forms列表是完美的,遗憾的是我不知道如何使用嵌套模型实现它.

谢谢.

我目前正在使用Backbone表单.

我目前有一个使用嵌套模型加载的模式.当我尝试用模板设置样式时,我没有得到预期的结果.

该模板类似于以下内容:

<div class="bounding">
  <h2>Title1 </h2>
      <div data-fields="name,type"></div>
      <div data-fields="bedrooms"></div>
  </div>
  <div class="bounding">
      <h2>Title 2</h2>
      <div data-fields="description"></div>
  </div>

卧室在模式中定义为:

bedrooms: {
  type: 'NestedModel',
  model:Bedroom,
  editorAttrs: {
    class: 'bedrooms'
  }
}

这显示没有由此调用的自定义模板:

template: _.template($('#formTemplate').html())

删除此行时,自定义模板看起来正确

<div data-fields="bedrooms"></div>

有没有办法可以同时使用自定义模板和嵌套模型？嵌套模型没有定义模板,只添加了模式.

谢谢

更新:Js Fiddle附上了类似的东西

//  template: _.template($('#formTemplate').html()),

应该切换到一个工作方式,它看起来不正确

更新:

Tommi Komulainen非常接近他的答案在这里,描述实际上是在第一个边界div而不是第二个.我该怎么把它移到第二个？

更新2:

我现在调用每个嵌套项目的渲染,然后像这样在主渲染之后注入

form.fields.bedrooms.render();
$('#bedrooms').html(form.fields.bedrooms.el);

这目前正在工作,但不觉得是一个"好"的解决方案

var User = Backbone.Model.extend({
    schema: {
        date: {type: 'Date'}
    }
});

var user = new User();

var form = new Backbone.Form({
    model: user
}).render();

$('.bootstrap').append(form.el);

我输入什么类型来使用包含的JQuery-UI datepicker？除此之外没有其他文件:

旧的jQuery编辑器仍然包含在内,但可能会被移动到另一个存储库:

jqueryui.List
jqueryui.Date(使用jQuery UI弹出日期选择器)
jqueryui.DateTime

模式类型用引号声明,我无法弄清楚jqueryui.Date的字符串是什么 - 而且这不能确定.

这是骨干表格的代码.现在,我想呈现一个提交按钮来验证我的文本字段和内容,这是记录的,除了如何将提交按钮放入dom.随便投降,无论如何,在我看来这很难找到新手

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: { type: 'Text'}
        }
    }).render();

    form1.on('country:change', function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);

    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);

以下屏幕截图显示了登录和注册的组合表单:

以下模块用于呈现AuthView:

MyApp.module("User", function(User, App, Backbone, Marionette, $, _) {

  User.AuthView = Marionette.ItemView.extend({

    className: "reveal-modal",
    template: "user/auth",

    ui: {
      signInForm: "#signin-form",
      signUpForm: "#signup-form"
    },

    events: {
      "focus input": "onFocus"
    },

    onFocus: function() {
      console.log("Some input field has received focus.");
    },

    onRender: function() {  
      this.signInForm = new Backbone.Form({
        schema: {
          signInEmail: { 
            type: "Text", 
            title: "E-Mail address"
          },
          signInPassword: { 
            type: "Password", 
            title: "Password"
          }
        }
      }).render();
      this.ui.signInForm.prepend(this.signInForm.el);

      this.signUpForm = new Backbone.Form({
        schema: {
          signUpEmail: { 
            type: "Text", 
            title: …

这是我第一次使用骨干表单插件,而且我也是Backbonejs的新手.我正在实现一个简单的表单,但标准的骨干表单'renderd不符合我的需要.阅读文档,我可以设置自定义下划线模板,但我无法理解如何渲染字段的标签.

有人能帮我吗？

编辑:

考虑以下因素:

var form = new Backbone.Form({
  template: _.template($('#formTemplate').html()),
  schema: {
    age: { type: 'Number', title: "Age" },
    name: { title: "Name" }
  }
});

和以下模板:

<script id="formTemplate" type="text/html">
    <form>

        <div data-editors="age"><!-- age editor will be added here --></div>
        <div data-editors="name"><!-- nameeditor will be added here --></div>

    </form>
</script>

如何让Backbone-form构建自动标签？

就像是:

<label data-label="age"><!-- I wish the label was added here --></label>
<div data-editors="age"><!-- age editor will be added here --></div>

计算如下:

<label for="c1_age">Age</label>