使用新集合填写复选框数组

时间:2012-03-01 19:58:15

标签: json forms backbone.js

我正在尝试使用请求网址中的JSON数组填充复选框数组。我已经阅读了文档,我看到我可以用模型和集合来做这件事,但我不知道如何开始。如果有人能告诉我路径是什么,我将不胜感激。这是我的代码:

var mBox = Backbone.Model.extend({

});
var cBox = Backbone.Collection.extend({
    model: mBox,
    url: 'http://localhost/oferta/prueba1/?json=get_taxonomy&taxonomy=habilidad&dev=1'
});
var Form = Backbone.Model.extend({
    schema: {
        id:                     {},
        nombre:                 {},
        apellidos:              {},
        email:                  { type: 'Text', dataType: 'email', validators: ['required', validateEmail] },
        telefono:               { type: 'Text', dataType: 'tel', validators: ['required'] },
        nacionalidad:           { type: 'Select', options: ['Española', 'Extranjera'] },
        link1:                  { type: 'Text', title: 'Enlace a Reel', dataType: 'url' },
        link2:                  { type: 'Text', title: 'Enlace a Web/Blog', dataType: 'url' },
        otros:                  { type: 'Text', dataType: 'url' },
        skills:                 { type: 'Checkboxes', options: new cBox() },
    }
});

2 个答案:

答案 0 :(得分:1)

你有个好的开始。我认为可能绊倒你的是如何实际获取数据并将其放入集合中。您的集合url上已定义了cBox属性,但这本身实际上并不是从服务器获取任何数据。您必须调用Backbone的Collection.fetch()方法来获取数据并将其放入集合中。

我会做这样的事情:

cBoxCheckboxes = new cBox(); // create a new cbox, but there is no data in here yet
cBoxCheckboxes.fetch(); // make a get request to the server (at the url you've specified) to get the data
var Form = Backbone.Model.extend({
    schema: {
        id:                     {},
        nombre:                 {},
        apellidos:              {},
        email:                  { type: 'Text', dataType: 'email', validators: ['required', validateEmail] },
        telefono:               { type: 'Text', dataType: 'tel', validators: ['required'] },
        nacionalidad:           { type: 'Select', options: ['Española', 'Extranjera'] },
        link1:                  { type: 'Text', title: 'Enlace a Reel', dataType: 'url' },
        link2:                  { type: 'Text', title: 'Enlace a Web/Blog', dataType: 'url' },
        otros:                  { type: 'Text', dataType: 'url' },
        skills:                 { type: 'Checkboxes', options: cBoxCheckboxes /* the collection with the data in it */ },
    }
});

答案 1 :(得分:0)

解决方案不起作用,我想..我重写代码,我这样做:

var mmyBox = Backbone.Model.extend({});

var cmyBox = Backbone.Collection.extend({
    model: mmyBox,
    url: 'http://localhost/wordpress/oferta/prueba1/?json=get_taxonomy&taxonomy=habilidad&dev=1',
    parse: function (resp, xhr) {
        console.log(resp.terms);
        return resp.terms;
    }
});

function validateEmail(str) {
    var regex = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");

    return regex.test(str) ? null : 'Invalid email';
}

var Form = Backbone.Model.extend({
    schema: {
        id:                     {},
        nombre:                 {},
        apellidos:              {},
        email:                  { type: 'Text', dataType: 'email', validators: ['required', validateEmail] },
        telefono:               { type: 'Text', dataType: 'tel', validators: ['required'] },
        nacionalidad:           { type: 'Select', options: ['Española', 'Extranjera'] },
        link1:                  { type: 'Text', title: 'Enlace a Reel', dataType: 'url' },
        link2:                  { type: 'Text', title: 'Enlace a Web/Blog', dataType: 'url' },
        otros:                  { type: 'Text', dataType: 'url' },
        skills:                 { type: 'Checkboxes', options: new cmyBox() },
    }
});

parse函数从json中返回数组术语。

Array
{
  "status": "ok",
  "count": 3,
  "terms": [
    {
      "id": 11,
      "slug": "artist",
      "title": "artist",
      "description": "",
      "post_count": 1
    },
    {
      "id": 13,
      "slug": "medico",
      "title": "medico",
      "description": "",
      "post_count": 1
    },
    {
      "id": 12,
      "slug": "programador",
      "title": "programador",
      "description": "",
      "post_count": 1
    }
  ]

似乎比新的cmyBox没有创建新的集合。那就是我在控制台看到的东西。

谢谢Josh的回答。欢呼声。