Chia mô hình xem loại trực tiếp thành nhiều tệp

Question

Mô hình chế độ xem của tôi bắt đầu trở nên rất lớn nên tôi đã quyết định chia thành nhiều tệp. Tôi đã thử nhiều cách tiếp cận khác nhau nhưng không có gì làm việc.

mô hình Quan điểm của tôi trông giống như:

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 
    } 
}; 

tôi cần phải truy cập vào các chức năng riêng và các thông số quan sát được trên nhiều tập tin. Mô hình cuối cùng của tôi sẽ trông giống như sau:

// 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)); 

Có thể đạt được điều gì đó như thế này với loại trực tiếp không? Cảm ơn

Answer 1

Tôi sẽ xem thư viện như RequireJS có thể được sử dụng để tách mô hình chế độ xem thành các mô-đun khác nhau, sau đó được tải vào ViewModel chính của bạn.

Có một số ví dụ rất đơn giản về việc sử dụng RequireJS với Knockout trên trang web Knockout here.

Hãy xem một số bài đăng thực sự hữu ích của John Papa về việc xây dựng một ứng dụng Trang đơn here.

Answer 2

Cuối cùng tôi đã tìm được cách thực hiện nó here. Đây là một ví dụ hoàn chỉnh:

<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> 

EDIT

Có một dự án có tên Durandal kết hợp RequireJS và KnockoutJS. Đáng xem nếu bạn quan tâm đến thực tiễn tốt nhất về kiến ​​trúc SPA cho KnockoutJS.