Backbone.js – 正确的模型初始化

前端之家收集整理的这篇文章主要介绍了Backbone.js – 正确的模型初始化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题:当存在需要以特定方式存储的属性时,什么是初始化backbone.js模型的正确方法?我需要映射不需要特殊格式的属性吗?我以为backbone.js做了某种自动映射.

例:

var MyModel = Backbone.Model.extend({

    initialize: function (options) {

        // These attributes need to be stored in a different format
        // Dates
        this.startYear = new Date(options.startTime).getFullYear();
        // Rounding numbers
        this.wholeNumber = Math.Round(options.numberWithDecimals);
        // Storing empty strings as nulls
        if (options.fullName == null || options.fullName == "") {
            this.fullName == null;
        } else {
            this.fullName = options.fullName;
        }

        // These are fine as they are
        this.fieldA = options.fieldA;
        this.fieldB = options.fieldB;
        this.fieldC = options.fieldC;
    },});

解决方法

首先你必须区分属性和实例变量.

属性:IMHO,它应该是纯对象作为String或Integer.他们通过REST API在客户机和服务器周围旅行.它们通过Model.get()/Model.set()方法操纵.它们通过Model.toJSON()发送到服务器(也可以使用相同的.toJSON()方法发送到模板,如果它们以某种方式改变,则会触发Backbone事件,您可以自定义属性的初始化操作服务器端的JSON信息才被发送到模型,覆盖了@muistooshort所建议的Model.parse()方法.

实例变量:(this.myAttribute事物)它们可以是复杂对象.在其更改中不触发任何隐式事件,并且在保存和更新调用中不会将其发送到服务器,并且以标准方式,它们不会发送到模板.

在你的例子中,你没有存储任何复杂的对象,如果你不憎恨你的模型会发送更多的属性到服务器,而不是从服务器收到的,你可以去@muistooshort的建议:

// code no tested
var MyModel = Backbone.Model.extend({
  parse: function(resp,xhr) {
    resp.startYear = new Date( resp.startTime ).getFullYear();
    resp.wholeNumber = Math.Round( resp.numberWithDecimals );
    if( resp.fullName == "" ) resp.fullName == null;

    return resp;
  },});

只要记住你这些属性,你必须以这种方式访问​​它们my_model.get(“startYear”)

解决方案的唯一问题是,如果原始属性更改,派生属性将不会更新.所以你可以来另一个实现:

// code no tested
var MyModel = Backbone.Model.extend({
  initialize: function(){
    this.updateAttributes();
    this.on( "change",this.updateAttributes,this );
  },updateAttributes: function() {
    this.set( "startYear",new Date( this.get( "startTime" ) ).getFullYear() );
    this.set( "wholeNumber",Math.Round( this.get( "numberWithDecimals" ) ) );
    if( this.get( "fullName" ) == "" ) this.set( "fullName",null );
  },});

更新

由于@TomTu建议您的onlive属性只需要提供模板,那么装饰器是最好的解决方案:https://stackoverflow.com/a/9687672/316700

猜你在找的JavaScript相关文章