2014-02-08 40 views
4

我正在使用Asp.net MVCknockoutjs的多租戶約會計劃應用程序。我想在JavaScript代碼模式決定中提供幫助。從服務器,並在JavaScript中我使用knockout mapping plugin創建淘汰賽模式我有以下情形:這個javascript代碼模式是好的嗎?

我越來越複雜的視圖模型(TenantModel名)。

讓我們看看我在我的TenantModel:

TenantModel包含各種複雜的類型,如:

  • 列表<EmployeeModel>
  • 列表<CustomerModel>
  • 列表<ServicesModel>
  • 簡介型號
  • 等等..

這些複雜的類型可以進一步含有複雜的類型,如:

  • EmployeeModel包含服務的列表來自他的管轄。
  • ProfileModel包含ContactModel

首先,我會告訴我的努力:

我已經決定在JavaScript代碼中使用Module Pattern。所以,目前在上午的思維來構建我的javascript代碼是這樣的:

var profile = (function() { 

    var _viewmodel; 

    var initialize = function() { 
     //initialize _viewmodel here 
    }; 

    var bind = function (node) { 
     ko.applyBindings(_viewmodel, node); 
    }; 

    return { 
     initialize: initialize, 
     bind: bind 
    }; 

})(); 


var employee = (function() { 

    var _viewmodel; 

    var initialize = function() { 
     //initialize _viewmodel here 
    }; 

    var bind = function (node) { 
     ko.applyBindings(_viewmodel, node); 
    }; 

    return { 
     initialize: initialize, 
     bind: bind 
    }; 

})(); 


var tenant = (function() { 

    var _viewmodel; 

    var initialize = function (jsonTenantModel) { 
     _viewmodel = ko.mapping.fromJSON(jsonTenantModel, { 
      'Profile': { 
       create: function (option) { 
        //create Profile using profile module 
       } 
      }, 
      'Employees': { 
       create: function (option) { 
        //create Employees using Employee module 
       } 
      } 
     }) 
    }; 

    var bind = function (node) { 
     ko.applyBindings(_viewmodel, node); 
    }; 

    return { 
     initialize: initialize, 
     bind: bind 
    }; 

})(); 

,大家好我沒有經驗的JavaScript程序員,但我想寫一個可擴展的和可管理的JavaScript代碼。我想知道那是我正確的方向嗎?或者有沒有其他更好的方法來實現這種場景?

+0

你的模型似乎過於複雜。您應該只傳遞每個視圖實際使用和需要的數據。 – rhughes

+0

看起來你正試圖將JavaScript變成C++的行爲。這會讓你的代碼沉重而繁瑣。我根本不會推薦這種方法。 –

+0

其實我有一個租戶儀表板,租戶可以在其中管理其所有數據,如客戶,服務,員工等,以便查看類似於單頁應用程序,這就是爲什麼我要在該視圖上傳輸所有租戶數據 – gaurav

回答

1

您使用RMP與淘汰賽的方法是一個很好的決定。並且將幫助您保持應用程序的可擴展性和可管理性。然而你的模塊看起來太複雜了。

有幾件事情你也需要考慮。

  1. 你打算如何處理模塊內的依賴關係?也許考慮使用require.js?

  2. 您的模塊將如何彼此溝通(如果需要)?你是否需要實現一個消息傳遞系統(本身就是一個模塊)

  3. 你想讓你的應用成爲一個單獨的頁面(這需要全新的考慮)一種或傳統的多頁面方法?

但什麼是好的做法是保持這些模型從他們的觀點模型分離,最好是在整個單獨的文件,您優化並結合生產。

這是一種簡單的方式,將您的視圖模型視爲集合持有者,而這些集合中的成員就是您的模型。

// Sketch of employee model 
function Employee(data){ 
    var self = this; 
    self.FirstName = ko.observable(data.FirstName); 
    self.LastName = ko.observable(data.LastName); 
    self.FullName = ko.computed(function(){ 
     return self.FirstName() + ' ' + self.LastName(); 
    }); 
} 

// Sketch of a possible list of employees 
// This viewmodel now will have a dependency on the Emplyee model 
// So if you have for example require.js you can go: 

// dataservice could be another module which you create to separate data calls 
// from your business logic 

require(["models/employee", "services/dataservice"], function(employee, dataservice) { 
    // and now employee model is availbale with this context: 

    function EmployeesList(data){ 
     var self = this; 
     self.employees = ko.observableArray(); 
     self.editDetails = function(employee){ 
      // code for editing employee 
     } 
     self.activate = function(){ 
      // So you can now add new employees in the 
      // collection based on your model 
      ko.utils.arrayForEach(data, function(item){ 
       self.employees.push(new employee(item)) 
      }); 
     } 
     return { 
      employees: self.employees, 
      activate: self.activate 
     } 
    } 

    // a data service which might have a getEmployees method which can take options like MinAge: 
    dataservice.getEmployees({ 'MinAge' : 36 }, function(employeeData){ 

     var myEmployeesList = new EmployeesList(employeeData) 

     // You might get tired of calling activate all the time for your view modules 
     // And also feel you have to deal with the area they might effect 
     // If you use a SPA framework (if you are making spa) then they usually have 
     // a automatic mechanism for activating modules and applying the binding e.g. Durandal.js 
     myEmployeesList.activate(); 

     ko.applyBindings(myEmployeesList); 
     // or 
     ko.applyBindings(myEmployeesList, $('#employeesContainer')[0]); 
    }); 
}); 

一些閱讀材料:

SPA JumpStart – Architecture

相關問題