个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
有两个表使用相同的源。这些表使用剑道模板的源绑定(bind)。目前这两个表的来源都是employees。这两个表显示相同的数据。
现在，我们需要修改它以仅在结果表中显示复选框选定的记录。此外，当用户单击结果表上的删除按钮时，应在部分表中取消选中该复选框。
我们需要做哪些修改才能使其在 MVVM 中工作？
头
<head>
<title>MVVM Test</title>
<script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>
<!----Kendo Templates-->
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td><button type="button" data-bind="click: deleteEmployee">Delete</button></td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" value="a">
</td>
</tr>
</script>
<!--MVVM Wiring using Kendo Binding-->
<script type="text/javascript">
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
</script>
</head>
MVVM
<script type="text/javascript">
var viewModel = kendo.observable({
// model definition
employees: [
{ name: "Lijo", age: "28" },
{ name: "Binu", age: "33" },
{ name: "Kiran", age: "29" }
],
personName: "",
personAge: "",
//Note: Business functions does not access any DOM elements using jquery.
//They are referring only the objects in the view model.
//business functions (uses "this" keyword - e.g. this.get("employees"))
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
//person object is created using "e"
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
employees.splice(index, 1);
}
});
</script>
正文
<body>
<table id="selectionTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees">
</tbody>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
<tbody data-template="row-template" data-bind="source: employees">
</tbody>
</table>
</body>
引用文献
最佳答案
要事第一。
如果在删除对象时从 viewModel 中删除该对象，它也会从源表中删除。如果您希望它按照您描述的方式进行，则需要两个数组来处理此问题。但根据你问题的第一部分，我想我应该发布一个解决方案。
<script id="row-template" type="text/x-kendo-template">
<tr data-bind="visible: isChecked">
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<button type="button" data-bind="click: deleteEmployee">Delete</button>
</td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
</td>
</tr>
</script>
<table id="selectionTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: employees"/>
</table>
var viewModel = kendo.observable({
employees: [
{ name: "Lijo", age: "28", isChecked: true },
{ name: "Binu", age: "33", isChecked: true },
{ name: "Kiran", age: "29", isChecked: true }
],
personName: "",
personAge: "",
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
var employee = employees[index];
//set
employee.set('isChecked', false);
}
});
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
在“row-template”中使用data-bind="visible: isChecked" 仅显示底部表格中选定的记录。
将复选框模板制作为
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
在删除函数中，使用以下内容
employee.set('isChecked', false);
关于javascript - 如何在结果表中只显示选定的记录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21982668/
25
4
0
我有十二个指向不同类别的链接。作为用户定位的一种方式，我想强调用户现在所在的类别( - 按钮)。 如何在 CSS 中实现这一点？我读到了 selected和 active ，但我还没能让它发挥作用。
我想通过单击按钮来获取选择框中的所有选项值(选定/未选定)。我怎样才能做到这一点？ 最佳答案 我认为这是使用 Traversing/map 的好机会方法: var valuesArray = $("#
我正在尝试构建一个计算器，其中包含两个数字的两个 TextView 字段。我弄清楚了如何使用“应用程序内”数字键盘输入顶部数字 Operand 1 [textView] 的数字(我知道使用 EditT
我有一个简单的 jQuery $("span.value")，它选择包含文本的节点。此文本保证为整数。如何计算所有选定节点文本的总和，并将总和放入另一个节点？ 3 4 5 ? 最佳答案 你可以这样做:
我从同一台服务器上托管的一堆数据库中备份了 mysql 数据库 db1。现在只需要备份具有访问 db1 权限的选定用户，以便我可以在 db1 还原之前将这些特权用户还原到我的新服务器。 最佳答案 St
我有一个 ListView 。我想添加一个动画，如果我选择一个列表项，它将被删除，并且该项目下方的其余项目将通过向上滑动动画向上移动。我已经通过获取其子位置使用线性布局完成了此操作，但我无法理解如何向
我不明白如何使用 Python 解析来自 Outlook 的突出显示(选定)邮件？ 我有这个代码，但它适用于上一封邮件。 import win32com.client outlook = win32c
在 Xcode 6 中，您现在可以为选项卡项目的选中和未选中状态设置图标。请参阅下图中的说明: 和 唯一的问题是 SELECTED 状态的图像不显示。它只是显示空白。还有其他人有这个问题吗？请看下面的
在我的数据模型中，我有一个实体组和另一个GroupMember实体。一个Group包含一个或多个GroupMembers，但一个GroupMember只能同时位于一个Group中。到目前为止没有问题，
Android Button 在不同状态(正常、按下、选中、禁用)之间移动时会更改其可绘制背景。背景切换是即时的。是否可以使其平滑(动画)？ 最佳答案 是的，这是可能的。您只需为按钮添加 addAni
我使用 emacs 来查看和编辑代码和其他文本文件。我想知道是否有一种方法可以向前或向后搜索当前缓冲区中标记的文本。类似于我在记事本或写字板中可以执行的操作。就像我可以在缓冲区中标记一些文本并执行 C
如何根据状态(选定、禁用)设置自定义选择类？如何根据状态选择(选定、禁用)在自定义下拉列表中设置类？照做了，但什么也没发生。请看我的例子................................
我正在尝试检查下拉菜单中是否存在特定文本值，如果存在，我想将其属性设置为selected。 我成功编写了一个 if 语句来检查文本是否存在: var country = usr.location; i
对于我的应用程序，我想让用户能够在回收器 View 中调整 TextView 项目的文本大小(通过捏缩放或 SeekBar)。默认值应为系统设置中选择的文本大小。最小值应为系统设置中的“非常小”，最大
我正在尝试创建一个 ListBoxItem 模板，该模板在选择时将带有圆角边框。我得到了这个 xaml，它在选择时不起作用:
我正在寻找检索焦点元素的 HTML。查看 webdriver.io 文档，方法 .getActiveElement() 应该可以解决这个问题。但是，我的 IDE (WebStorm) 显示错误，指出它
我创建了一个圆，在我的 onDraw() 方法中围绕圆绘制了一条字符串和一条线(箭头)。 public class Circle extends Activity { public class
对于生产应用程序，我们希望在 Windows 窗体应用程序的 ElementHost 内显示 DatePicker，但我们遇到了 SelectedDate 和 CurrentDate 不可读的问题，因
好的，我在此处和 Google 上的许多网站上搜索了此问题的结果，但找不到针对我的问题的确切解决方案。 我有一个 sql 提取姓名和办公室。所以事情是这样的: $sql = "SELECT m
选中单元格时如何改变灰色？ 最佳答案 当用户点击选中的行 (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSInd
我是一名优秀的程序员,十分优秀！