编辑HTML属性剑道UI上的模板绑定

Question

我对剑道很陌生，显然我太愚蠢了，找不到解决方案。我想用MVVM构建一个内置可编辑卡的小Web应用程序。通常，我可以将我的编辑模板与jQuery绑定到ViewModel。例如：

editTemplate: kendo.template($('#cardEditTemplate').html())

但我想知道是否可以将html中的编辑模板直接绑定到属性。类似这样的东西：

<div id="board-#: Id #" class="board" data-template="listTemplate" data-bind="source:ListViewModels "></div>

Answer 1

不是这样的，您需要绑定源代码并创建可以访问该源代码的模板，类似于以下内容：

<div id="users">
<div data-bind="source: users" data-template="users-template"></div>
<script type="text/x-kendo-template" id="users-template">
<div>
<span>#: username #</span> ||<span data-bind="text: username"></span><br>
<span>#: age #</span> ||<span data-bind="text: age"></span>
</div>
</script>
<button class="k-button" data-bind="click: updateName">Update first name</button>
<button class="k-button" data-bind="click: updateAge">Update first name</button>
</div>
<script>
$(document).ready(function () {
var obs = function () {
return kendo.observable({
users: [{id: 1, username: 'Jon', age: 32}, {id: 2, username: 'Jake', age: 22}],
updateName: function () {
this.users[0].set('username', 'updated name');
},
updateAge: function () {
this.users[1].set('age', '100');
}
});
};
let viewModel = obs();
kendo.bind($('#users'), viewModel);
});
</script>

工作示例：Kendo模板绑定

PS。点击更新按钮检查#:#和data-bind="text:"之间的差异

Answer 2

听起来像是要动态设置元素属性。当您将数据集合绑定到"；数据模板">

一个很好的用例是设置ID属性，以帮助实现自动化，或者设置for属性以帮助实现用户体验。再次设置FOR属性将帮助自动化团队使用标签驱动的方法，使自动化查找策略在本质上更符合逻辑(更易于阅读(。

以下是您要查找的代码：

标签：

<label data-bind="attr: { for: LogicalName + '_nameTxt' }" class="" style="white-space:nowrap;">#=LogicalName#:</label>

输入：

<input data-bind="attr: { id: LogicalName + '_nameTxt' }, value: Value" type="text" class="form-control" maxlength="50" style="width:300px;" />

注意必须附加任何附加字符串。不允许进行预处理。