Làm cách nào để kết hợp các mẫu từ các tệp HTML khác nhau

Question

Vì các mẫu riêng lẻ của Knockout được giữ trong thẻ tập lệnh, tôi nghĩ rằng tôi có thể đặt thuộc tính src của thẻ và tải HTML từ một tệp riêng biệt. Làm như vậy ngây thơ đơn giản là không hiệu quả, do đó, hoặc

1. Có một số mẹo để nhận được sự gắn kết của các mẫu để làm việc với src thẻ mà tôi cần phải sử dụng
2. Có một cách khác nhau để tải mẫu từ các tập tin khác nhau

(Hai khả năng còn lại - 3, tất cả các lập trình viên trong dự án này sẽ sửa đổi cùng một tệp khổng lồ, sẽ được trình duyệt tải lên khi khởi động và 4, không sử dụng Knockoutjs cho bất cứ điều gì lớn hơn một dự án đồ chơi - tôi xem xét tương đương.)

Answer 1

Trình duyệt sẽ không phản hồi với src trên bất kỳ thứ gì có loại khác với một trong các loại 'javascript' khác nhau và với những loại nó sẽ cố gắng thực hiện kết quả dưới dạng tập lệnh.

Một số tùy chọn mặc dù:

• sử dụng một mẫu động cơ có thể kéo các mẫu từ xa (tốt nhất là ở đây: https://github.com/ifandelse/Knockout.js-External-Template-Engine).

• Vòng lặp trên thẻ tập lệnh chứa mẫu và tải chúng lên. Một cái gì đó như thế này sẽ kéo nội dung bằng cách sử dụng src làm vị trí. Bạn sẽ cần phải cẩn thận khi bạn gọi applyBindings, nếu các mẫu của bạn chưa sẵn sàng.

  $("script[type='text/html']").each(function(index, el) { $.get($(el).attr("src"), 
      function(response) { 
       $(el).text(response); }); 
  }); 
  

• Dưới đây là một số tùy chọn khác mà tôi đã xem xét cho làm một này khi trở lại: http://www.knockmeout.net/2011/03/using-external-jquery-template-files.html

Answer 2

Mỗi mẫu trong dự án của tôi là tập tin html riêng của mình. Tôi sử dụng quy ước đặt tên (* .ko.html) để nhận dạng chúng. xây dựng chuỗi của tôi đi như thế này:

Bước 1: Lint và giảm bớt các tập tin * .ko.html Đây chỉ là để loại bỏ ý kiến ​​(trừ <!-- ko --> những người thân) và dải khoảng trống thừa cho một tải trọng nhỏ gọn hơn.

Bước 2: Cắt xén và rút gọn html được rút gọn thành tệp js. Các js trông giống như

var templates={ 
    'name1':'some stringified html', 
    'name2':'some more' 
}; 

tôi đã xem xét concatenating vào một file html với <script type="text/plain"> delimiters nhưng đã chọn js vì cách này nó có thể được nạp bằng một <script> thẻ đơn giản thay vì một ajax get + tiêm.

Bước 3: Sửa công cụ mẫu gốc để truy xuất mẫu từ đối tượng js của tôi.

var engine = new ko.nativeTemplateEngine(); 
engine._makeTemplateSource = engine.makeTemplateSource; 

engine.makeTemplateSource = function (template, doc) {   
    if (typeof (template) === 'string' && templates[template]) { 
     return { text: function() { return templates[template]; } }; 
    } 
    return engine._makeTemplateSource(template, doc); 
}; 
ko.setTemplateEngine(engine); 

thực hiện của tôi sử dụng gruntjs để thực hiện các bước xây dựng.(Grunt-contrib-htmlmin, grunt-contrib-concat)

tùy chọn cho htmlmin:

{ 
removeComments: true, 
collapseWhitespace: true, 
ignoreCustomComments: [/^\s*ko /, /^\s*\/ko /] 
} 

tùy chọn cho concat

{ 
    stripBanners: true, 
    banner: "(function(t){", 
    footer: "})(window.templates || (window.templates={}));", 
    process: function (src, file) { 
     return 't[\'' + file.replace(/^.*\//, '').replace('.ko.html', '') + '\']=' + JSON.stringify(src) + ';'; 
    } 
} 

Đối với bất cứ ai tự hỏi tại sao mọi người sẽ muốn làm điều này: Tệp nguồn mẫu là các tệp html cá nhân chuẩn có thể được chỉnh sửa trong bất kỳ trình soạn thảo html và nguồn nào được kiểm soát như vậy. Việc chỉnh sửa html bên trong các thẻ <script> không hề vui. Như một phần thưởng, các tệp nguồn có thể bao gồm các nhận xét sẽ bị loại bỏ. Mẫu có thể sử dụng lại trên bất kỳ trang nào bằng cách bao gồm thẻ tập lệnh: chúng không cần phải được gạch chân vào mỗi trang. Gói kết quả là một tệp tĩnh mà trình duyệt có thể dễ dàng lưu vào bộ nhớ cache, trong khi các mẫu được nhúng vào trang được tạo động không thể. Khá nhiều lý do tương tự cho việc nhóm các tệp javascript.