onAfterRender 函数中未定义的剔除视图模型属性

Question

我有一个如下所示的视图模型，当 Knockout 触发 onAfterRender 时，将执行视图模型中的函数（也称为 onAfterRender），但 this.gridColumns、this.gridOptions 的值未定义，是否有解决此问题的方法？我更愿意保留对象函数而不是使用对象文字。

我像这样创建 viewModel：

var model = new i2owater.viewmodels.AlarmsForViewModel(somedata);

并调用 ko.applyBindings(model);

这是我的视图模型：

viewModel = function (serverData) {
var alarmGrid = {};

function onAfterRender() {
    var that = this;
    this.alarmGrid = new i2owater.Slickgrid();

    // this.gridColumns and this.gridOptions are both undefined
    this.alarmGrid.setupGrid("#alarmsGrid", [], this.gridColumns, this.gridOptions);
};

return {
    data: data,
    tabs: tabs,
    selectedPriority: selectedPriority,
    company: company,
    zone: zone,
    rows: rows,
    alarmPeriod: alarmPeriod,
    //alarmGrid: alarmGrid,
    gridColumns: [{ id: "id", name: "ID", field: "id", sortable: true },
        { id: "date", name: "Date", field: "date", sortable: true },
        { id: "description", name: "Description", field: "description"}],
    gridOptions: {
        editable: true,
        enableCellNavigation: true,
        asyncEditorLoading: true,
        forceFitColumns: false,
        topPanelHeight: 25,
        rowHeight: 40
    }
    onAfterRender: onAfterRender
};

};

Answer 1

有多种方法可以确保 this 在这种情况下是正确的。

一种选择是创建一个 result 变量，将函数绑定到该变量，然后返回 result。

var result = {
    data: data,
    tabs: tabs,
    selectedPriority: selectedPriority,
    company: company,
    zone: zone,
    rows: rows,
    alarmPeriod: alarmPeriod,
    //alarmGrid: alarmGrid,
    gridColumns: [{ id: "id", name: "ID", field: "id", sortable: true },
        { id: "date", name: "Date", field: "date", sortable: true },
        { id: "description", name: "Description", field: "description"}],
    gridOptions: {
        editable: true,
        enableCellNavigation: true,
        asyncEditorLoading: true,
        forceFitColumns: false,
        topPanelHeight: 25,
        rowHeight: 40
    }
};

result.onAfterRender = onAfterRender.bind(result);

return result;

否则，您可以像这样构建它，而不是返回匿名对象文字：

viewModel = function (serverData) {
    var alarmGrid = {};

    function onAfterRender() {
        var that = this;
        this.alarmGrid = new i2owater.Slickgrid();

        // this.gridColumns and this.gridOptions are both undefined
        this.alarmGrid.setupGrid("#alarmsGrid", [], this.gridColumns, this.gridOptions);
    };

    this.data = data;
    this.tabs = tabs;
    this.selectedPriority = selectedPriority;
    this.company = company;
    this.zone = zone;
    this.rows = rows;
    this.alarmPeriod = alarmPeriod;
    this.gridColumns = [{ id: "id", name: "ID", field: "id", sortable: true },
            { id: "date", name: "Date", field: "date", sortable: true },
            { id: "description", name: "Description", field: "description"}];
    this.gridOptions = {
        editable: true,
        enableCellNavigation: true,
        asyncEditorLoading: true,
        forceFitColumns: false,
        topPanelHeight: 25,
        rowHeight: 40
    };
    this.onAfterRender = onAfterRender.bind(this);
};

或者使用 KO 1.3 ko.utils.extend 中的扩展函数来扩展当前的 this 。例如：

viewModel = function (serverData) {
    var alarmGrid = {};

    function onAfterRender() {
        this.alarmGrid = new i2owater.Slickgrid();
        this.alarmGrid.setupGrid("#alarmsGrid", [], this.gridColumns, this.gridOptions);
    };

    ko.utils.extend(this, {
        data: data,
        tabs: tabs,
        selectedPriority: selectedPriority,
        company: company,
        zone: zone,
        rows: rows,
        alarmPeriod: alarmPeriod,
        //alarmGrid: alarmGrid,
        gridColumns: [{ id: "id", name: "ID", field: "id", sortable: true },
            { id: "date", name: "Date", field: "date", sortable: true },
            { id: "description", name: "Description", field: "description"}],
        gridOptions: {
            editable: true,
            enableCellNavigation: true,
            asyncEditorLoading: true,
            forceFitColumns: false,
            topPanelHeight: 25,
            rowHeight: 40
        }
        onAfterRender: onAfterRender.bind(this)
    });
};

另外，使用 bind 的替代方法是在构造函数的开头执行 var self = this; ，然后使用 self 在 onAfterRender 函数内。