的JavaScript顯露的模塊模式變量的作用域

Question

我有一個問題，我無法給一個變量的一個函數裏：

編輯 我忘了補充一點，我對jQuery的$(function(){});

設置此 workerPage.grid = $("#grid").data("kendoGrid");

我不能使用claimsGird變量裏面的保存功能，我必須通過workerPage.grid來引用它。不是像viewModel其他變量工作正常。下面是摘錄：

save = function() { 
       saif.kendoGridUtils.addModifiedDataItems(
        viewModel.CompanionClaims.Updated, 
        viewModel.CompanionClaims.Added, 
        $("#grid").data("kendoGrid").dataSource.data() 
       ); 

       $.ajax({ 
        url: $("#contentForm").attr("action"), 
        data: JSON.stringify(viewModel), 
        type: "POST", 
        contentType: "application/json" 
       }).success(function (data) { 
        //syncs viewModel with changes in model 
        $.extend(viewModel, kendo.observable(data)); 

        //rebinds the grid data source 
        claimsGrid.dataSource.data(viewModel.CompanionClaims.Rows); 

以下是完整的腳本：

var workerPage = (function() { 
     var viewModel = kendo.observable(@Html.Raw(Json.Encode(Model))), 
      claimsGrid = null, 
      deleteFirm = function (firmModel) { 
       firmModel.Name = ""; 
       firmModel.AttorneyName = ""; 
       firmModel.Address.Line1 = ""; 
       firmModel.Address.Line2 = ""; 
       firmModel.Address.City = ""; 
       firmModel.Address.State = "OR"; 
       firmModel.Address.ZipCode = ""; 
       firmModel.Address.PlusFourCode = ""; 
       firmModel.PhoneNumber = ""; 
       firmModel.FaxNumber = ""; 
       firmModel.ContactName = ""; 
      }, 
      bind = function() { 
       kendo.bind($("#main-content"), viewModel); 
      }, 
      save = function() { 
       saif.kendoGridUtils.addModifiedDataItems(
        viewModel.CompanionClaims.Updated, 
        viewModel.CompanionClaims.Added, 
        $("#grid").data("kendoGrid").dataSource.data() 
       ); 

       $.ajax({ 
        url: $("#contentForm").attr("action"), 
        data: JSON.stringify(viewModel), 
        type: "POST", 
        contentType: "application/json" 
       }).success(function (data) { 
        //syncs viewModel with changes in model 
        $.extend(viewModel, kendo.observable(data)); 

        //rebinds the grid data source 
        claimsGrid.dataSource.data(viewModel.CompanionClaims.Rows); 


        //rebinds view elements to view model so changes are visible 
        //kendo.bind($("#main-content"), viewModel); 
        bind(); 

        // Errors and Warnings 
        var results = messageUtils.parseMessages(
         viewModel.Messages.Errors, 
         viewModel.Messages.Informationals, 
         viewModel.Messages.Warnings 
        ); 

        var errs = $("#errors").html(results.errorMessages); 
        $("#informationals").html(results.informationalMessages); 
        $("#warnings").html(results.warningMessages); 

        $.each(saif.kendoGridUtils.processErrors(viewModel.CompanionClaims.Rows), function (i, message) { 
         errs.html(errs.html() + message + "<br>"); 
        }); 
        // End Errors and Warnings 

       }); 
      }, 
      deleteRow = function() { 
       var row = claimsGrid.select(), 
        rowDataItem = claimsGrid.dataItem(row), 
        rowIndex = $(row).index(), 
        addedItemIndex = $.inArray(rowDataItem, viewModel.CompanionClaims.Added); 

       //add to Deleted if not new 
       if (addedItemIndex == -1 && $.inArray(rowDataItem, viewModel.CompanionClaims.Rows) != -1) { 
        viewModel.CompanionClaims.Deleted.push(rowDataItem); 
       } 

       //remove from Added if exists 
       if (addedItemIndex != -1) { 
        viewModel.CompanionClaims.Added.splice(addedItemIndex, 1); 
       } 

       claimsGrid.removeRow(row); 

       //select the next row, eg. if you delete row 2, select the row that took that rows poisition after it was deleted. 
       claimsGrid.select(claimsGrid.tbody.find(">tr:eq(" + rowIndex + ")")); 
      }; 

     return { 
      bind: bind, 
      deleteFirm: deleteFirm, 
      deleteRow: deleteRow, 
      grid: claimsGrid, 
      save: save, 
      viewModel: viewModel 
     }; 

    }()); 

Answer 1

問題是claimsGrid從未設置爲null以外的任何值。並設置workerPage.grid將不會更改值claimsGrid - 這不是一個指針，只是一個副本。

你將不得不使用getter/setter。隨着newer browsers/engines，可與get和set來完成：

// ... 
return { 
    // ... 
    get grid() { 
     return claimsGrid; 
    }, 
    set grid(grid) { 
     claimsGrid = grid; 
    }, 
    // ... 
}; 

您還可以定義grid作爲一個功能：

// ... 
function getOrSetGrid(grid) { 
    if (typeof newGrid === 'undefined') { 
     return claimsGrid; 
    } else { 
     claimsGrid = grid; 
    } 
} 

return { 
    // ..., 
    grid: getOrSetGrid, 
    // ... 
}; 
// ... 

// rather than: workerPage.grid = ...; 
workerPage.grid(...); 

或者它拆分成getGrid和setGrid功能。

Answer 2

範圍在JavaScript的工作方式不同於如Java或C＃等語言。在你的情況下，claimsGrid不在保存函數的範圍內。這有幫助嗎？ http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/