Я не могу понять, почему, но у меня есть 2 "компонента", я пытаюсь создать шаблон и привязать, и только второй работает по назначению.Kendo binding и templating
Первый, по-видимому, шаблонный, но не привязывающий (данные не заполняются в соответствии с объявленными привязками в шаблонной строке).
Кто-нибудь знает, почему?
Компонент 1: сетки с 1 шаблонного элемента ...
<div class="component k-content" data-type="BusinessTask">
<h2><span class="k-sprite folder"></span> Business Tasks <img src="/Content/close.png"></h2>
<script>
$(function() {
//TODO: add signalR behaviour to allow grid update notifications from the server
dependency.get('BusinessTask');
BusinessTaskGridChange = function (arg) {
if(typeof BusinessTask.gridItemClick != 'undefined') {
var grid = $("#BusinessTaskGrid").data("kendoGrid");
var item = grid.dataItem(grid.select());
BusinessTask.gridItemClick(item);
}
};
var BusinessTaskModel = createModel('BusinessTask');
$("#BusinessTaskGrid").kendoGrid({
dataSource: BusinessTaskModel,
rowTemplate: kendo.Template.compile($("#BusinessTaskRow").html()),
selectable: "row",
columns: type.columnsFor("BusinessTask"),
change: BusinessTaskGridChange,
error: page.error
});
});
</script>
<script id="BusinessTaskRow" type="text/x-kendo-template">
<tr>
<td><span data-bind="text: ID"></span></td>
<td><a href="" data-ref-type="Workflow" data-bind="attr: { data-ref: WorkflowID }, events: { click: refClick }">View Workflow</a></td>
<td><span data-bind="text: FlowPosition"></span></td>
<td><span data-bind="text: Title"></span></td>
<td><pre data-bind="text: Description"></pre></td>
<td><span data-format="dd MMM yyyy" data-bind="text: Created"></span></td>
<td><span data-format="dd MMM yyyy" data-bind="text: Due"></span></td>
<td><span data-bind="text: BusinessTaskStatusID"></span></td>
<td><span data-bind="text: BusinessTaskTemplateID"></span></td>
<td><span data-bind="text: DependentEntityID"></span></td>
<td><input type="checkbox" data-bind="checked: ActiveStatusID" readonly="readonly" disabled="disabled" /></td>
<td><span data-bind="text: SystemID"></span></td>
</tr>
</script>
<div id="BusinessTaskGrid" class="details k-grid k-widget" data-role="grid"></div>
</div>
Компонент 2: один элемент связан непосредственно (без кендо сетки) ...
<div id="BusinessTask1_View" class="component k-content" data-type="BusinessTask">
<h2><span class="k-sprite edit"></span> Business Task: 1 <img src="/Content/close.png"></h2>
<script>
$(function() {
dependency.get('BusinessTask');
var BusinessTask1_ViewModel = createModel('BusinessTask', '1');
var component = $("#BusinessTask1_View");
kendo.bind(component, BusinessTask1_ViewModel);
});
</script>
<div class="details">
<ul class="fieldList">
<li>
<label for=""> Workflow</label>
<div class="value"><a href="" data-ref-type="Workflow" data-bind="attr: { data-ref: WorkflowID }, events: { click: refClick }" data-ref="1">View Workflow</a></div>
</li>
<li>
<label for=""> Flow Position</label>
<div class="value"><span data-bind="text: FlowPosition"></span></div>
</li>
<li>
<label for=""> Title</label>
<div class="value"><span data-bind="text: Title"></span></div>
</li>
<li>
<label for=""> Description</label>
<div class="value"><pre data-bind="text: Description"></pre></div>
</li>
<li>
<label for=""> Created</label>
<div class="value"><span data-format="dd MMM yyyy" data-bind="text: Created"></span></div>
</li>
<li>
<label for=""> Due</label>
<div class="value"><span data-format="dd MMM yyyy" data-bind="text: Due"></span></div>
</li>
<li>
<label for=""> Business Task Status</label>
<div class="value"><span data-bind="text: BusinessTaskStatusID"></span></div>
</li>
<li>
<label for=""> Business Task Template</label>
<div class="value"><span data-bind="text: BusinessTaskTemplateID"></span></div>
</li>
<li>
<label for=""> Dependent Entity</label>
<div class="value"><span data-bind="text: DependentEntityID"></span></div>
</li>
<li>
<label for=""> Active Status</label>
<div class="value"><input type="checkbox" data-bind="checked: ActiveStatusID" readonly="readonly" disabled="disabled"></div>
</li>
<li>
<label for=""> System</label>
<div class="value"><span data-bind="text: SystemID"></span></div>
</li>
</ul>
<hr>
<button class="k-button" data-bind="events: { click: edit }">Edit</button>
</div>
</div>