Tạo các thành phần có thể tái sử dụng với KnockoutJS

Question

Tôi đã tạo các thành phần có thể sử dụng lại như các plugin jQuery cho các dự án trong một thời gian. Tôi thích có thể trừu tượng hóa logic, và tiêm tất cả các bối cảnh (các bộ chọn, các tùy chọn, vv) trên cơ sở từng trường hợp.

Bây giờ, tôi bắt đầu sử dụng KnockoutJS và đã viết một plugin jQuery nhỏ đẹp sử dụng Knockout cho logic nội bộ của nó. Nó hoạt động khá tốt, nhưng tôi tự hỏi nếu có một cách tốt hơn để làm điều đó? Có Knockout chính nó có một mô hình/quy ước để tạo ra các thành phần tái sử dụng, hoặc là mô hình này được không?

Dưới đây là một ví dụ, nó sẽ là đủ để cung cấp cho bạn ý tưởng về những gì tôi đang làm.

/*globals jQuery, knockout */ 
(function ($, ko) { 
    "use strict"; 
    $.fn.itemManager = function (options) { 
     // set up the plugin options 
     var opts = $.extend({}, $.fn.itemManager.defaultOptions, options), 
      $wrap = $(this), 
      templateUrl = '/path/to/template/dir/' + opts.templateName + '.html'; 

     // set up the KO viewmodel 
     function ItemManagerModel(items) { 
      var self = this; 

      self.items = ko.observableArray(items); 
      self.chosenItemId = ko.observable(); 
      self.chosenItemData = ko.observable(); 

      // generic method for navigating the Item hierarchy 
      self.find = function (array, id) { 
       /* ... */ 
      }; 

      /* bunch of other stuff... */ 

      self.goToItem(items[0]); 
     } 

     // this is where the whole thing starts... 
     $(opts.openTriggerSelector).click(function (e) { 
      e.preventDefault(); 

      // set the template html 
      $.get(templateUrl, function (data) { 
       $wrap.html(data); 
      }); 

      // initial load and binding of the data, in reality I have some more conditional stuff around this... 
      // there's probably a better way to do this, but I'll ask in a separate question :) 
      $.get(opts.getItemsServiceUrl, function (result) { 
       ko.applyBindings(new ItemManagerModel(result), document.getElementById($wrap.attr('id'))); 
       $wrap.data('bound', true); 
      }); 

      // opens the template, which now is bound to the data in a dialog 
      $wrap.dialog({ /* ... */ }); 

    // provide default plugin options 
    $.fn.itemManager.defaultOptions = { 
     getItemsServiceUrl: '/path/to/service', 
     openTriggerSelector: 'a', 
     templateName: 'Default' 
    }; 
} (jQuery, ko)); 

Answer 1

Tôi chạy một dự án github cho các thành phần KO. Nó sử dụng một phiên bản cũ của KO và là do cho một cải tạo lớn nhưng bạn có thể có được một số ý tưởng. Về cơ bản tôi làm tất cả thông qua các ràng buộc tùy chỉnh lấy các đối tượng mô hình làm cấu hình và dữ liệu của chúng.

Tôi luôn tìm kiếm cách tốt hơn để thực hiện việc này. Hãy để tôi đăng nếu bạn nghĩ ra một cách tốt hơn.

https://github.com/madcapnmckay/Knockout-UI