Übergeben Sie benutzerdefinierte Parameter in typescript-definierte Knockout-Komponente geladen als AMD mit requirjs

Question

Ich habe eine Dashboard-Komponente erstellt, die andere Komponenten mithilfe der Knockout-Komponente Bindung lädt. Verwenden von Typescript. Grundsätzlich funktioniert es.

Die Komponenten werden wie folgt registriert ...

ko.components.register('camera-widget', { 
    viewModel: { require: 'Scripts/app/Widgets/CameraWidget/ViewModels/CameraWidgetViewModel' }, 
    template: { require: 'text!Scripts/App/Widgets/CameraWidget/Views/CameraWidget.html' } 
}); 

... und instanziiert die Komponente Bindungs ​​cusing (wobei tagName = 'Kamera-widget' und Parameter = {/ * einige Anfangswerte haben, die Komponente ihre Daten geladen * /}):

<div data-bind="component: tagName, params: parameters"></div> 

in Maschinenschrift der CameraWidgetViewModel Klasse wie folgt definiert ist:

import ko = require('knockout'); 
import PagerSettings = require('../Models/PagerSettings'); 
import PagerSettingsViewModel = require('./PagerSettingsViewModel'); 
import CameraViewModel = require('./CameraViewModel'); 

class CameraWidgetViewModel implements CameraWidget.ICameraWidgetViewModel { 
    constructor (data: any) { 
     if (data.someValue) { 
      // BOOOOM! data is undefined 
     } 
    } 
} 
export = CameraWidgetViewModel; 

Zusammengestellt in JS ist die CameraWidgetViewModel Klasse in einer anonymen Funktion eingewickelt:

define(["require", "exports", 'knockout', '../Models/PagerSettings', './PagerSettingsViewModel'], function (require, exports, ko, PagerSettings, PagerSettingsViewModel) { 
    var CameraWidgetViewModel = (function() { 
     function CameraWidgetViewModel(data) { 
     } 
    }); 
}); 

Wie kann ich die Parameter aus der Komponente verwalten Bindung in diesen inneren Funktionsaufruf übergeben werden?

Answer 1

In Knockout in der Dokumentation auf der Komponente zu binden, können Sie die erforderliche Syntax finden:

Um Parameter an die Komponente zu liefern Pass ein Objekt mit den folgenden Eigenschaften:

• Name - der Name der zu injizierenden Komponente. Auch dies kann beobachtbar sein.

• Parameter - ein Objekt, das an die Komponente weitergegeben wird. In der Regel ist dies ein Schlüsselwertobjekt, das mehrere Parameter enthält und normalerweise vom Viewmodel-Konstruktor der Komponente empfangen wird.

Quelle: Knockout Component Binding, subheading: API, Hervorhebung von mir

Die Art und Weise Sie instanziiert haben Ihre Bindung übergibt die Parameter außerhalb des component verbindlich. Sie sollten in einem Objekt hinter einer params Eigenschaft sein. Sie müssen dieses Markup verwenden:

data-bind="component: { name: tagName, params: parameters }" 

Answer 2

Sie exportieren nichts aus Ihrer CameraWidgetViewModel-Datei, sodass tatsächlich nichts definiert wird. Aber ich glaube auch nicht, dass Sie eine Klasse exportieren sollten, weil es looks like knockout erwartet, dass eine Funktion zurückgegeben wird, nicht ein Konstruktor.

ich versuchen würde, das an der Unterseite der Datei hinzufügen:

function getViewModel(...args) { 
    return new CameraWidgetViewModel(...args); 
} 

export = getViewModel;