Apego de TypeScript y Knockout a ''este'' problema-¿Se necesita la función lambda?

knockout.js

Question

He estado creando una función htmlHelper usando TypeScript y KnockoutJS para editar una lista de correos electrónicos.

La lista de correos electrónicos es Knockout ObservableArray llamada correos electrónicos , y tengo un enlace contra cada elemento para eliminarlos. Este es el fragmento de HTML:

   <ul data-bind="foreach: emails" >
        <li>
            <a href="#" data-bind="click: $parent.deleteItem">Delete</a>
            &nbsp;<span data-bind="text: $data"></span>
        </li>
    </ul>

El enlace de eliminación está obligado a $ parent.deleteItem, este es un método en el modelo de vista:

// remove item
public deleteItem(emailToDelete: string) {
    // remove item from list
    this.emails.remove(emailToDelete);
}

Todo esto funciona hasta que se ejecuta el método deleteItem. El "esto" en este método cuando se llama es el elemento en la matriz, y no el modelo de vista. Por lo tanto this.emails es una referencia nula y falla.

Sé que TypeScript admite la sintaxis de Lambda, pero no puedo encontrar la forma correcta de escribir esto (hay algunos ejemplos).

¿O hay un enfoque diferente que podría tomar?

Answer 1

Aunque prefiero la solución de Markus, esto es lo que he usado antes para solucionar este problema:

public fixThis(_this, func) {
    return function () {
        return _this[func].apply(_this, arguments);
    };
}

<a href="#" data-bind="click: fixThis($parent, ''deleteItem'')">Delete</a>

Tenga en cuenta que se pueden pasar argumentos adicionales al método agregándolos después del nombre del método:

fixThis($parent, ''deleteItem'', arg1, arg2);

Answer 2

Guantes personas! Solo une $ parent como esto:

<a href="#" data-bind="click: $parent.deleteItem.bind($parent)">Delete</a>

Answer 3

Me inspiró la respuesta de bind y se me ocurrió esto, creo que es un poco más fácil de leer.

<a href="#" data-bind="click: function () {$parent.deleteItem()}">Delete</a>

Envuelva el método en una función lambda / anónima. No olvides el ().

Answer 4

Mi solución final es una clase base, que enlaza todas las funciones prototipo consigo mismo en el constructor. Al igual que la solución de Markus Jarderot.

class BaseClass {
    constructor() {
        for (var i in this) {
            if (!this.hasOwnProperty(i) && typeof (this[i]) === ''function'' && i != ''constructor'') {
                this[i] = this[i].bind(this);
            }
        }
    }
}

Ventajas:

• Todas las subclases están forzadas a llamar a super constructor, que es el comportamiento que quería.
• Cuando se ejecuta el código de reenlace, solo hay funciones de prototipo en el objeto (las variables se agregan más adelante).
• Evita la creación de grandes funciones en cada objeto. Solo se crea una pequeña función de proxy por objeto cuando se llama bind.
• Mejor organización del código de clase al no poner funciones en el constructor.
• Cualquier función se puede utilizar como devolución de llamada, no es necesario cambiar el código cuando se llama a una función desde un evento.
• No tiene el riesgo de vincular funciones dos veces.
• Es mejor vincular la función solo una vez, en lugar de hacerlo en la vista cada vez que se ejecuta el enlace de clic / evento.

PD:
Aún necesitarás el enlace polyfill.
Estoy usando typesript 0.9.5

Answer 5

Puede obtener el cierre correcto para ''esto'' al declarar el cuerpo del método dentro del constructor de la clase

class VM {
    public deleteItem: (emailToDelete: string) => void;

    constructor() {
        this.deleteItem = (emailToDelete: string) => {
            // ''this'' will be pointing to ''this'' from constructor
            // no matter from where this method will be called
            this.emails.remove(emailToDelete);
        }
    }        
}

ACTUALIZAR:

Parece que desde Typescript ver 0.9.1 puede lograr el mismo resultado utilizando los inicializadores de campo lambda:

class VM {
    public deleteItem = (emailToDelete: string) => {
        this.emails.remove(emailToDelete);
    }        
}

Answer 6

Usa data-bind algo como esto:

data-bind="click:$parent.deleteItem.bind($parent)"

Asignar this a that como se muestra a continuación

public deleteItem(itemToDelete) 
{
    var that = this;
    // remove item from list
    that.emails.remove(itemToDelete); 
}

Answer 7

para agregar mis 2 centavos, también hay una manera sucia que aprovecha la variable _esta creada por el compilador de Typescript para mantener una referencia sobre esto:

public deleteItem(emailToDelete: string) {
    var that = eval(''_this'');
    // remove item from list
    that.emails.remove(emailToDelete); // remove? in JS,  really? 
}

Answer 8

declare class Email { }
declare class ObservableArray {
    remove(any): void;
}

class MyViewModel {
    public emails : ObservableArray;

    constructor() {
        Rebind(this);
    }

    public deleteItem(emailToDelete: Email) {
        this.emails.remove(emailToDelete);
    }
}

function Rebind(obj : any)
{
    var prototype = <Object>obj.constructor.prototype;
    for (var name in prototype) {
        if (!obj.hasOwnProperty(name)
                && typeof prototype[name] === "function") {
            var method = <Function>prototype[name];
            obj[name] = method.bind(obj);
        }
    }
}

Es posible que desee un relleno múltiple para Function.bind() :

// Polyfill for Function.bind(). Slightly modified version of
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind#Compatibility
if (typeof Function.prototype.bind !== "function") {
    Function.prototype.bind = function(oThis) {
        if (typeof this !== "function") {
            // closest thing possible to the ECMAScript 5 internal IsCallable function
            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
        }

        var aArgs = <any[]> Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function() {},
            fBound = function() {
                return fToBind.apply(this instanceof fNOP && oThis ? this: oThis, aArgs.concat());
            };

        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();

        return fBound;
    };
}