कई फाइलों में नॉकआउट व्यू मॉडल को विभाजित करना

Question

मेरा व्यू मॉडल बहुत बड़ा हो रहा है इसलिए मैंने इसे कई फाइलों में विभाजित करने का फैसला किया। मैंने पहले से ही कई अलग-अलग दृष्टिकोणों की कोशिश की है लेकिन कुछ भी काम नहीं कर रहा था।

namespace.model = function(constructorParam) { 
    var self = this; 

    self.param1 = ko.observable(constructorParam.param1); 
    self.param2 = ko.observable(privateFunction(constructorParam)); 

    self.clickEvent = function() { 
     // do something with params 
     // call some private funcitons 
     privateFunction2(self.param2); 
    }; 

    function privateFunction(param) { 
     // do some stuff 
    } 

    function privateFunction2(param) { 
     // do some stuff 
    } 
}; 

मैं एकाधिक फ़ाइलों भर में निजी कार्यों और नमूदार मापदंडों का उपयोग करने की जरूरत है:

मेरा विचार मॉडल की तरह लग रहा है। मेरा अंतिम मॉडल इस तरह दिखना चाहिए:

// file 1 
// contains constructor and param initialization + many common private helper funcitons 
namespace.model = function(constructorParam) { 
    var self = this; 

    self.param1 = ko.observable(constructorParam.param1); 
    self.param2 = ko.observable(privateFunction(constructorParam)); 

    function privateFunction(param) { 
     // do some stuff 
    } 

    function privateFunction2(param) { 
     // do some stuff 
    } 
}; 

// file 2 
// contains event hendlers 
self.clickEvent = function() { 
    // i need to acces properties from namespace.model 
    self.param1 

    // call some private funcitons 
    privateFunction2(self.param2); 
}; 

// view model initialization 
ko.applyBindings(new namespace.model(initValues)); 

क्या इस तरह कुछ नॉकआउट के साथ हासिल करना संभव है? धन्यवाद

Answer 1

मैं RequireJS की तरह एक पुस्तकालय जो अलग 'मॉड्यूल' जो तब आपका मुख्य ViewModel में लोड कर रहे हैं में अपने viewmodel विभाजित करने के लिए इस्तेमाल किया जा सकता है पर एक नज़र ले जाएगा।

नॉकआउट वेबसाइट here पर नॉकआउट साथ RequireJS उपयोग करने के कुछ बहुत ही सरल उदाहरण हैं।

एकल पृष्ठ एप्लिकेशन here के निर्माण पर जॉन पिताजी से कुछ वास्तव में सहायक पदों पर एक नजर डालें।

Answer 2

अंत में मैं एक तरह से यह here कैसे करना है मिल गया है।

<div> 
    Name: <input data-bind="value: name" type="text" /> <br /> 
    Surname: <input data-bind="value: surname" type="text" /><br /> 
    Fullname: <span data-bind="text: fullName"></span><br /> 
    <button data-bind="click: showName">Show Name</button> 
</div> 

<script> 

    Function.prototype.computed = function() { 
     this.isComputed = true; 
     return this; 
    }; 

    Object.prototype.makeComputeds = function() { 
     for (var prop in this) { 
      if (this[prop] && this[prop].isComputed) { 
       this[prop] = ko.computed(this[prop], this, { deferEvaluation: true }); 
      } 
     } 
    }; 
    // file 1 
    var namespace = namespace || {}; 

    namespace.model = function (params) 
    { 
     var self = this; 

     self.name = ko.observable(params.name); 
     self.surname = ko.observable(params.surname); 

     self.makeComputeds(); 
    }; 

    // file 2 
    (function() { 
     function showFullName(fullName) { 
      alert(fullName); 
     } 

     ko.utils.extend(namespace.model.prototype, { 

      showName: function() { 
       showFullName(this.fullName()); 
      }, 
      // computed observable 
      fullName: function() { 
       return this.name() + " " + this.surname(); 
      }.computed() 

     }); 

    })(); 

    ko.applyBindings(new namespace.model({ name: "My Name", surname: "My Surname" })); 

</script> 

संपादित

एक परियोजना Durandal कहा जाता है जो RequireJS और KnockoutJS को जोड़ती है: यहां एक संपूर्ण उदाहरण है। यह देखने के लायक है कि क्या आप एसपीए आर्किटेक्चर में रुचि रखते हैं, नॉकआउटजेएस के लिए सर्वोत्तम प्रथाओं।