Kendo 模板源绑定数组创建双项
Kendo Template source binding array creates double entries
我正在使用带有数组的 Kendo 模板动态地向表单添加行,但是,当我将一个项目推送到数组时,它添加了两行,它们都绑定到同一个数据对象MVVM(所以有两个对象,有四行)。我 运行 模板中的页面有 debugger;
行,而且正如所怀疑的那样,它在完成之前点击了两次。
更奇怪的是,它按顺序呈现行,然后以相反的顺序呈现,所以如果我对第一行进行更改,它随后会对最后一行进行相同的更改(因为它们绑定到数组中的相同对象)等
HTML
这是表单所在的 HTML(可观察对象 classInfo
已经绑定到 <form>
标记,因此数据绑定中缺少它的原因):
<fieldset id="classWhen">
<p>
<!-- other form stuff -->
</p>
<div id="classDates" data-bind="source: classInfo.ClassDates" data-template="classDateTemplate"></div>
</fieldset>
Kendo 模板
这是模板,其中包含一个下拉列表和两个日期选择器的行:
<script id='classDateTemplate' type='text/kendo-ui-template'>
<p>
<select class="classDateTypeDropdown">
<option><!-- TYPE 1 --></option>
<option><!-- TYPE 2 --></option>
<option><!-- TYPE 3 --></option>
<option><!-- TYPE 4 --></option>
</select>
<input class="classDatePicker" data-bind="value: DateStart" style="width: 125px;" /> to
<input class="classDatePicker" data-bind="value: DateStop" style="width: 125px;" />
</p>
</script>
Kendo 可观察对象
这里是 Kendo Observable,它有一个数组,格式如下:
var classModel = new kendo.observable({
classInfo: {
//.....
ClassDates: [],
//.....
}
});
Javascript 推送函数
还有一个 addDate()
将新项目推送到数组的函数:
function addDate() {
classModel.get("classInfo.ClassDates").push({
"ClassType": "Type 1",
"DateStart": null,
"DateStop": null
});
//change inputs to DatePickers
//change select to DropDownList
}
我已经尝试 运行 在不创建 DropDownList 和 DatePickers 的情况下使用基本 HTML 元素对其进行设置,但结果相同。任何帮助将不胜感激。
所以,我不确定为什么会这样(需要进行一些研究),但问题的原因是我的绑定。显然 Kendo 模板不喜欢绑定到属于其他对象的对象数组,就像我在 classInfo.ClassDates
.
中那样。
我更改了绑定:
kendo.bind($('#addClassWindow'),
classModel);
<div data-bind="source:
classInfo.ClassDates"data-template="classDateTemplate"></div>
至:
kendo.bind($('#addClassWindow'),
classModel.classInfo);
<div data-bind="source:
班级日期"data-template="classDateTemplate"></div>
现在可以正常使用了。无论出于何种原因。
我正在使用带有数组的 Kendo 模板动态地向表单添加行,但是,当我将一个项目推送到数组时,它添加了两行,它们都绑定到同一个数据对象MVVM(所以有两个对象,有四行)。我 运行 模板中的页面有 debugger;
行,而且正如所怀疑的那样,它在完成之前点击了两次。
更奇怪的是,它按顺序呈现行,然后以相反的顺序呈现,所以如果我对第一行进行更改,它随后会对最后一行进行相同的更改(因为它们绑定到数组中的相同对象)等
HTML
这是表单所在的 HTML(可观察对象 classInfo
已经绑定到 <form>
标记,因此数据绑定中缺少它的原因):
<fieldset id="classWhen">
<p>
<!-- other form stuff -->
</p>
<div id="classDates" data-bind="source: classInfo.ClassDates" data-template="classDateTemplate"></div>
</fieldset>
Kendo 模板
这是模板,其中包含一个下拉列表和两个日期选择器的行:
<script id='classDateTemplate' type='text/kendo-ui-template'>
<p>
<select class="classDateTypeDropdown">
<option><!-- TYPE 1 --></option>
<option><!-- TYPE 2 --></option>
<option><!-- TYPE 3 --></option>
<option><!-- TYPE 4 --></option>
</select>
<input class="classDatePicker" data-bind="value: DateStart" style="width: 125px;" /> to
<input class="classDatePicker" data-bind="value: DateStop" style="width: 125px;" />
</p>
</script>
Kendo 可观察对象
这里是 Kendo Observable,它有一个数组,格式如下:
var classModel = new kendo.observable({
classInfo: {
//.....
ClassDates: [],
//.....
}
});
Javascript 推送函数
还有一个 addDate()
将新项目推送到数组的函数:
function addDate() {
classModel.get("classInfo.ClassDates").push({
"ClassType": "Type 1",
"DateStart": null,
"DateStop": null
});
//change inputs to DatePickers
//change select to DropDownList
}
我已经尝试 运行 在不创建 DropDownList 和 DatePickers 的情况下使用基本 HTML 元素对其进行设置,但结果相同。任何帮助将不胜感激。
所以,我不确定为什么会这样(需要进行一些研究),但问题的原因是我的绑定。显然 Kendo 模板不喜欢绑定到属于其他对象的对象数组,就像我在 classInfo.ClassDates
.
我更改了绑定:
kendo.bind($('#addClassWindow'),
classModel);
<div data-bind="source:
classInfo.ClassDates"data-template="classDateTemplate"></div>
至:
kendo.bind($('#addClassWindow'),
classModel.classInfo);
<div data-bind="source:
班级日期"data-template="classDateTemplate"></div>
现在可以正常使用了。无论出于何种原因。