kendo-ui - 剑道网格编辑弹出 mvvm 绑定似乎失败
问题描述
当我添加一个新行并在编辑 eventHandler(model.set("port","udp")) 中设置模型属性的值时,网格弹出 mvvm 绑定似乎失败,但是选择输入不会改变值并且从调试器控制台它表明 event.model 的属性值保持不变。
但是在我手动选择端口后,我尝试model.set(“port”,“tcp”),它可以工作!
我对输入元素的值字段和剑道模型绑定的绑定机制的时机感到困惑......
html部分如下:
<div class="k-block k-shadow">
<table style="width:100%;">
<tr><td><button class="btn-add" id="ButtonNew" type="button" onclick="addSetting()">New</button></td></tr></table>
</div>
<div class="k-block k-shadow">
<div id="logForwardingGrid"></div>
</div>
javascript如下:
var dataSource = new kendo.data.DataSource({
data:{"items":[{"seq":8,"ip":"10.0.0.99","port":36,"protocol":"udp","enable":false}]},
schema: {
data: "items",
model: {
id: "seq",
fields: {
seq: { type: "int", editable: false, validation: { required: false} },
port: { type: "int",editable: true, validation: { required: true} },
protocol: { type: "string",editable: true, validation: { required: true} },
enable: { type: "boolean", validation: { required: true} },
}
}
},
});
$("#logForwardingGrid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "seq",
hiddenEdit: true,
hidden: true
}, {
field: "ip",
title: "IP",
}, {
field: "port",
title: "Port",
}, {
field: "protocol",
title: "Protocol",
editor: protocalEditor
}],
editable: {
mode:"popup",
},
edit: function(e) {
if (e.model.isNew()) {
//fail !! e.model's value of property("protocol") keep unchanged
e.model.set("protocol","udp")
console.log(e.model)
}
}
});
function protocalEditor(container,options){
var data = [{ text: "udp", value: "udp" },{ text: "tcp", value: "tcp" }]
$('<input id="protocol" name="protocol" required data-bind="value:'+ options.field +'"/>')
.appendTo(container).kendoDropDownList({
dataSource:data,
dataTextField: "text",
dataValueField: "value",
});
}
function addSetting(){
$("#logForwardingGrid").data("kendoGrid").addRow();
}
解决方案
尝试defaultValue
在模型声明中为该字段提供一个:
var dataSource = new kendo.data.DataSource({
data:{"items": [{"seq":8,"ip":"10.0.0.99","port":36,"protocol":"udp","enable":false}]},
schema: {
data: "items",
model: {
id: "seq",
fields: {
seq: { type: "int", editable: false, validation: { required: false} },
port: { type: "int",editable: true, validation: { required: true} },
protocol: { type: "string",editable: true, validation: { required: true}, defaultValue: "tcp" },
enable: { type: "boolean", validation: { required: true} },
}
}
},
});
我不知道为什么,但这似乎解决了问题。有关工作示例,请参见dojo 。
推荐阅读
- python - IndexError:元组索引超出范围,将 Python 连接到 PostgreSQL
- google-apps-script - 有没有办法在 Google 表格对话框中使用单选按钮并使用 Google App Scripts 保存值?
- java - 如何更新firebase中的特定值
- javascript - 在 Angularjs-chosen 中选择模型时禁用重新选择
- python - Numpy ndarray 意外的形状广播错误
- html - 如何截断 Bootstrap 卡片页脚文本?
- c - 如何重新分配不同大小的二维结构指针
- arrays - 执行命令后使用 sed 删除换行符并将其保存在数组中
- c - 使用 DYLD_INSERT_LIBRARIES 的 macOS 自定义 malloc/free 加载得不够早
- c++ - 如何创建一个适用于 lambda 表达式的排序函数?