【问题标题】:Typescript type checking - Backbone.Model instance cannot be type checkedTypescript 类型检查 - Backbone.Model 实例无法进行类型检查
【发布时间】:2013-05-09 20:43:39
【问题描述】:

我遇到了 Typescript 和 Backbone 集合的问题。以下是一些基础工作:

class BaseChartModel extends Backbone.Model { }
class ScatterPlotModel extends BaseChartModel { }
class BarChartModel extends BaseChartModel { }

class MixedChartCollection extends Backbone.Collection { public model: BaseChartModel; ... }
class ScatterPlotCollection extends Backbone.Collection { public model: ScatterPlotModel; ... }
class BarChartCollection extends Backbone.Collection { public model: BarChartModel; ... }

然后我执行以下操作:

 var scatterPlotCollection = new ScatterPlotCollection();
 var scatterPlotCollectionXhr = scatterPlotCollection.fetch({...});

 var barChartCollection = new BarChartCollection();
 var barChartCollectionXhr = barChartCollection.fetch({...});

 $.when(scatterPlotCollectionXhr, barChartCollectionXhr).done(() => {

       mixedCollection = new MixedChartCollection();
       mixedCollection.add(scatterPlotCollection.models, { silent: true });
       mixedCollection.add(barChartCollection.models, { silent: true });
       chartViewList = new MixedChartViewList({ collection: mixedCollection });

       chartViewList.render();

 });

内部渲染():

public render(){
     var self = this;
     this.$el.html(this.template({}));

     this.collection.forEach(
    (chartModel: BaseChartModel) => {
            this.$el.append(self.AddChartView(chartModel).render());                  
    }
 );

     return this;
}

public AddChartView(baseChartModel: BaseChartModel) : BaseChartView {

      var newChartView: BaseChartView;

      if(baseChartModel instanceof ScatterPlotModel){
           newChartView = new ScatterPlotView({ model: baseChartModel});
      } else if (baseChartModel instanceof BarChartModel){
           newChartView = new BarChartView({ model: baseChartModel});
      } 
      ....       
}

除了instanceof 永远不会评估为真,因为似乎派生自Backbone.Model 的“类类型”被分配给Backbone.Model.attributes,而不是类本身的实例。我相信这是因为在实现派生自 Backbone.Model 的类时,我遵循了this 方法,似乎这可能是导致此问题的原因。基本上,它将 TS 类上的 get/set 属性委托给底层 Backbone.model.get()/set(),后者反过来设置 attributes 属性上的值。

看来我必须要么放弃这种方法(并希望这是问题所在),要么想办法在baseChartModel.attributes 对象和我的类原型之间进行类似于或使用instanceof 的松散耦合类型检查App.BackBone.Models.ScatterPlotModel

这个断点在与instanceof比较的那一行

有什么想法吗?

【问题讨论】:

    标签: backbone.js typescript backbone.js-collections


    【解决方案1】:

    您使用的方法似乎足够有效。我已将以下代码插入 TypeScript 游乐场,只是为了检查一些 javascript 语义:

    class A { }
    
    class B extends A { }
    
    class Checker {
        static isA(input: A) {
            return (input instanceof A);
        }
    }
    
    var a = new A();
    var b = new B();
    
    document.writeln('a instanceof A ' + (a instanceof A) + '<br/>');
    document.writeln('b instanceof B ' + (b instanceof B) + '<br/>');
    document.writeln('b instanceof A ' + (b instanceof A) + '<br/>');
    document.writeln('b instanceof A (via function) ' + Checker.isA(b) + '<br/>');
    
    var aArray : A[] = [];
    
    aArray.push(a);
    aArray.push(b);
    
    for(var i = 0; i < aArray.length; i++) {
        document.writeln('aArray[' + i + '] instance of A ' + (aArray[i] instanceof A) + '<br/>' );
    }
    

    这给出了以下输出:

    a instanceof A true 
     b instanceof B true 
     b instanceof A true 
     b instanceof A checker true 
     aArray[0] instance of A true 
     aArray[1] instance of A true 
    

    这一定意味着调用

    mixedCollection.add( scatterPlotCollection.models, { silent: true });
    

    是这里的问题。
    可能 scatterPlotCollection.models 没有返回您的原始对象(即 ScatterPlotModel 或 BarChartModel ),而只是返回 [Object object],因此实例失败?

    希望这会有所帮助,

    【讨论】:

    • 感谢您对此进行尝试,尽管这不是一个很好的解决方案。我现在意识到这个问题的全部范围,所以我发布了一个单独的问题 (stackoverflow.com/questions/15775092/…) 以获得更通用的解决方案。
    【解决方案2】:

    我想我知道“错误”在哪里:以某种方式声明

    public model: CustomModelType
    

    没有用;

    但是,如果您要创建这样的集合:

     new MyCustomCollection(null, { model: CustomModelType });
    

    然后主干将能够按预期创建模型。

    为什么会这样,我不知道 :( 可能是类型定义中的错误。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-11-14
      • 1970-01-01
      • 2012-09-29
      • 2022-01-27
      • 2019-12-26
      • 2015-04-17
      相关资源
      最近更新 更多