JsRender/JsViews：如何让 {for} 为子类数组工作

Question

我已经将 Array 子类化（使用 TypeScript），以便能够向 Array 添加额外的功能。请参阅下面的代码。

从那以后，我注意到 JsRender/JsViews 的 {for} 标签不再起作用了。我还注意到 JsRender/JsViews 使用 $.isArray(...) 来迭代数组，这将 return false 在子类数组上。

当我更改 JsRender/JsViews 代码以使用 (data instanceof Array) 时，它确实有效。

是否有另一种方法（不更改 JsRender/JsViews 代码）让子类数组与 JsRender/JsViews {for} 标签一起使用？

打字稿：

module MyModule {
    export class Collection<T> implements Array<T> {
        constructor() {
            Array.apply(this, arguments);
            return new Array();
        }

        length: number;
        toString(): string { return ""; }
        //... All other Array properties/methods
    }

    // replace dummy declarations with the real thing
    Collection['prototype'] = new Array();
}

生成Javascript:

var MyModule;
(function (MyModule) {
    var Collection = (function () {
        function Collection() {
            Array.apply(this, arguments);
            return new Array();
        }

        Collection.prototype.toString = function () { return ""; };
        //... All other Array properties/methods

        return Collection;
    })();
    MyModule.Collection = Collection;

    // replace dummy declarations with the real thing
    Collection['prototype'] = new Array();
})(MyModule|| (MyModule= {}));

Answer 1

你的 SubclassedCollection 不是 JavaScript 数组（就像 jQuery object 不是 JavaScript 数组一样）。与您的 Collection 不同，它来自 Object.prototype.toString.call(ob) returns "[object Object]" - 而不是 "[object Array]".

一种可能的方法是使用函数：

function toArray(ob) {
    return Array.prototype.slice.call(ob);
}

并写

MyModule.ViewModel = { Coll: toArray(collection2) };

或者注册 toArray 作为助手 (~toArray) 或转换器 ("toArray")，然后将您的模板编写为：

{{for ~toArray(Coll)}}

（或者 {{for Coll convert=~toArray}} 或 {{for Coll convert="toArray"}}）。

这是您的 jsfiddle 的更新分支：http://jsfiddle.net/16L670re/

JsRender/JsViews：如何让 {for} 为子类数组工作

JsRender/JsViews: How to get {for} working for subclassed arrays

jsrender

jsviews

typescript