là có thể sử dụng Mẫu bên ngoài trong KnockoutJS như thế này không?Sử dụng Mẫu bên ngoài trong KnockoutJS
<script type="text/html" id="a_template" src="templates/a_template.html">
</script>
Tôi đã thử giải pháp này nhưng không làm cho giải pháp hoạt động.
Bạn cũng có thể xem xét:
https://github.com/ifandelse/Knockout.js-External-Template-Engine
Cảm ơn, điều này có vẻ khá thẳng về phía trước. – KebdnK
* Trong tệp HTML của bạn, tham khảo jQuery, jquery-tmpl (nếu bạn đang sử dụng các mẫu jquery), knockout.js, TrafficCop, infuser và tệp koExternalTemplateEngine.js * - Nó không có vẻ rất nhẹ :) – soniiic
Bạn có thể cũng chỉ tham chiếu koExternalTemplateEngine_all.js bao gồm công cụ template, TrafficCop và infuser. Cả ba thư viện đều được viết bởi Jim, khi anh nhận ra rằng một số chức năng này hữu ích bên ngoài KO. –
Bạn có thể sử dụng jquery để tự động tải html vào phần tử tập lệnh và sau đó thực thi loại trực tiếp dựa trên đó.
<script type="text/html" id="template_holder"></script>
<script type="text/javascript">
$('#template_holder').load('templates/a_template.html', function() {
alert('Load was performed.');
//knockout binding goes here
});</script>
ràng buộc phải được thực hiện trong hàm callback mặc dù, nếu không có một cơ hội mà bạn sẽ phải cố gắng để ràng buộc trước khi trang đã được nạp
CẬP NHẬT Ở đây loại trực tiếp của bạn là một ví dụ tôi đã được mã hóa trên jsfiddle để chứng minh nạp năng động: http://jsfiddle.net/soniiic/2HxPp/
Cảm ơn nhưng tôi nghĩ rằng Engine mẫu bên ngoài tốt hơn một chút vì nó ẩn tất cả các yêu cầu. – KebdnK
Ok :) nhưng hãy nhớ rằng người dùng vẫn có thể xem các yêu cầu: http://code.google.com/chrome/devtools/docs/network-files/network_panel.png – soniiic
Đây là giải pháp tốt. Đây là một ràng buộc loại bỏ ví dụ của một trình giữ chỗ mẫu div: ko.applyBindings (myViewModel, $ ('# template_holder') [0]); – ROFLwTIME
Bạn cũng có thể sử dụng Template bootstrapper này cho KO
Bootstrapper https://github.com/AndersMalmgren/Knockout.Bootstrap
MVC WebAPI Demo https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo
Nó sử dụng một Công ước về cấu hình approuch sử dụng lib này https://github.com/AndersMalmgren/Knockout.BindingConventions
Có nghĩa là nó sẽ tự động hiểu rằng MyViewModel sh Ould được kết hợp với MyView
của nó cũng chuẩn bị để làm việc độc đáo trong một SPA
Disclaimer: Tôi là tác giả đằng sau 3 libs nêu trên
Dưới đây là một chút xây dựng chức năng tắt của câu trả lời soniiic của :
function loadExternalKnockoutTemplates(callback) {
var sel = 'script[src][type="text/html"]:not([loaded])';
$toload = $(sel);
function oncomplete() {
this.attr('loaded', true);
var $not_loaded = $(sel);
if(!$not_loaded.length) {
callback();
}
}
_.each($toload, function(elem) {
var $elem = $(elem);
$elem.load($elem.attr('src'), _.bind(oncomplete, $elem));
});
}
này sẽ tự động tải tất cả các mẫu loại trực tiếp trên tài liệu của bạn, với điều kiện src của họ được thiết lập và loại của họ là "text/html". Chuyển qua một cuộc gọi lại để được thông báo khi tất cả các mẫu được tải. Không biết điều gì sẽ xảy ra nếu bất kỳ lỗi nào trong số đó không thành công.
Ví dụ sử dụng:
<head>
<script type="text/html" src="kot/template1.html" id="template1"></script>
</head>
<body>
<script>
$(function() {
loadExternalKnockoutTemplates(function() {
// Put your ready code here, like
ko.applyBindings();
});
});
function loadExternalKnockoutTemplates(callback) {
var sel = 'script[src][type="text/html"]:not([loaded])';
$toload = $(sel);
function oncomplete() {
this.attr('loaded', true);
var $not_loaded = $(sel);
if(!$not_loaded.length) {
callback();
}
}
_.each($toload, function(elem) {
var $elem = $(elem);
$elem.load($elem.attr('src'), _.bind(oncomplete, $elem));
});
}
</script>
</body>
Rất thông minh nhưng tôi sẽ không upvote trước khi bạn thay thế '_.bind (chưa hoàn thành, $ elem)' với 'oncomplete.bind ($ elem)' và '_.each' với 'ko.utils.arrayForEach'; -) Không cần thêm dấu gạch dưới –
Bạn cũng có thể kiểm tra câu hỏi này: http://stackoverflow.com/questions/17073648/load-knockout-template-from-external-file-without-complex-engine. Nó thảo luận các mẫu bên ngoài cho KnockoutJS mà không cần sử dụng các khung bên thứ 3. –