ノックアウトビューモデルのプロパティは、onAfterRender関数で未定義です

Question

次のようなビューモデルがあります.nockoutによってonAfterRenderが起動され、次にviewModel（onAfterRenderとも呼ばれる）の関数が実行されますが、this.gridColumns、this.gridOptionsこれを修正するにはどうにかしていますか？私は、オブジェクトリテラルを使用するのではなく、オブジェクトの機能を維持することを推奨します。

私はこのように私のViewModelを作成：

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

とko.applyBindings（モデル）を呼び出すと、

これが私の見解モデルです：

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が正しいことを確認する方法はいくつかあります。

1つのオプションはresult変数を作成し、その変数に関数をバインドしてから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); 
}; 

するか、現在のthisのような拡張するためにKO 1.3でko.utils.extendのような拡張機能を使用します：

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() { 
     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;をCの冒頭に使用することもできますonAfterRender関数内でselfを使用します。