1
我正试图让自己熟悉热毛巾SPA模板。在阅读Ryan Vanderpol的this article后,我想实施内联编辑。如何使用热毛巾包含文本/ html脚本
现在我对如何在节内容中插入'text/html'类型的脚本块感到茫然。
这是我在我的视图部分(注意里面的两个脚本块)。
<section>
<h2 class="page-title" data-bind="text: title"></h2>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Company Name</th>
<th>Last Name</th>
<th>First Name</th>
<th style="width: 50px; text-align:right;" />
</tr>
</thead>
<tbody data-bind=" template: { name: templateToUse, foreach: customers }"></tbody>
</table>
<script id="readTemplate" type="text/html">
<tr>
<td data-bind='value: CustomerID' ></td>
<td data-bind='value: CompanyName' ></td>
<td data-bind='value: LastName' ></td>
<td data-bind='value: FirstName' ></td>
<td class="buttons">
<a class="btn" data-bind="click: edit" href="#" title="edit"><i class="icon-edit"></i></a>
<a class="btn" data-bind="click: removeCustomer" href="#" title="remove"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
<script id="editTemplate" type="text/html">
<tr>
<td><input data-bind='value: CustomerID' /></td>
<td><input data-bind='value: CompanyName' /></td>
<td><input data-bind='value: LastName' /></td>
<td><input data-bind='value: FirstName' /></td>
<td class="buttons">
<a class="btn btn-success" data-bind="click: save" href="#" title="save"><i class="icon-ok"></i></a>
<a class="btn" data-bind="click: cancel" href="#" title="cancel"><i class="icon-trash"></i></a>
</td>
</tr>
</script>
</section>
这是我的视图模型。
define(['services/logger'], function (logger) {
function Customer(data) {
var self = this;
self.CustomerID = ko.observable(data.CustomerID);
self.CompanyName = ko.observable(data.CompanyName);
self.LastName = ko.observable(data.LastName);
self.FirstName = ko.observable(data.FirstName);
};
function ViewModel() {
var self = this;
self.title = 'Customers';
self.customers = ko.observableArray([]);
self.selectedItem = ko.observable();
self.edit = function (item) {
self.selectedItem(item);
};
self.cancel = function() {
self.selectedItem(null);
};
self.removeCustomer = function (customer) {
// Code for deleting row
}
self.save = function() {
// Code for saving changes
};
self.templateToUse = function (item) {
return self.selectedItem() === item ? 'editTemplate' : 'readTemplate';
};
}
var vm = new ViewModel();
return vm;
});
当我运行该应用程序时,在Chrome中调试时出现“无法找到带有ID readTemplate的模板”的错误。
我该如何去实施热毛巾我的html模板?
感谢您的任何帮助。
是的,这将工作。事实上,我发现它更优雅,因为您可以轻松地将模板移动到另一个文件,而不是强制它们进入脚本标记引用。这使得它们更容易调试,直到需要时才加载模板,并使它们可重用。 – 2013-03-21 03:21:32
您也可以使用Durandal提供的一些约定,因此您不必粘贴.html或路径前缀。 – 2013-03-21 03:22:04
感谢Marc-Andre的建议。我现在能够将我的脚本块合并到我的视图中。谢谢你的建议。 – 2013-03-21 04:33:26