题目比较拗口，但是这篇文章确实直说这一点。
knockout.js是一个JS库，它的官网是http://knockoutjs.com/
这篇文章的重点是knockout在工作的一个功能中的应用。最终效果图如下：
点击Add Other Source UI添加一个空行
现有行可以直接修改
点击delete UI删除当前行
点击保存时数据才会录入到服务器
Html代码如下
<div class="row">
<span class="label">Information from other sources:</span>
<table class="inline-dataTable">
<thead>
<tr>
<td>
Test
</td>
<td>
Date
</td>
<td>
Scores
</td>
<td>
Action
</td>
</tr>
</thead>
<tbody data-bind="foreach: OtherSources">
<tr>
<td>
<input required="required" class="required" data-bind="value: Test, uniqueName: true, uniqueId: Test" /><span
class="field-validation-valid" data-bind="valmsg: true" data-valmsg-replace="true" />
</td>
<td>
<input id="Date" class="Date required noFutureDate" required="required" data-bind="value: Date, uniqueName: true, dateName: true, uniqueId: Date" /><span
class="field-validation-valid" data-bind="valmsg: true" data-valmsg-replace="true" />
</td>
<td>
<input required="required" class="required number" data-bind="value: Scores, uniqueName: true, uniqueId: Scores" /><span
class="field-validation-valid" data-bind="valmsg: true" data-valmsg-replace="true" />
</td>
<td>
<a href="#" data-bind="click: function(){ viewModel.removeOtherSource($data) } ">delete</a>
</td>
</tr>
</tbody>
</table>
<div class="add-button">
<a href="#" id="ButtonAddOtherSource" data-bind="click: addOtherSource">Add Other Source</a>
</div>
</div>
Js代码如下：
$(document).ready(function () { // NOTE: KnockoutJS unique id generator (http://*.com/questions/9233176/unique-ids-in-knockout-js-templates) ko.bindingHandlers.uniqueId = { init: function (element, valueAccessor) { var value = valueAccessor(); value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); element.id = value.id; }, counter: 0, prefix: "unique" }; // 这是为每个element生成不同ID ko.bindingHandlers[‘uniqueName‘] = { ‘currentIndex‘: 0, ‘init‘: function (element, valueAccessor) { if (valueAccessor()) { element.name = "ko_unique_" + (++ko.bindingHandlers[‘uniqueName‘].currentIndex); // Workaround IE 6/7 issue // - https://github.com/SteveSanderson/knockout/issues/197 // - http://www.matts411.com/post/setting_the_name_attribute_in_ie_dom/ if (ko.utils.isIe6 || ko.utils.isIe7) element.mergeAttributes(document.createElement("<input name=‘" + element.name + "‘/>"), false); } } }; // 这是为每个element生成不同Name ko.bindingHandlers[‘dateName‘] = { init: function (element, valueAccessor) { if (valueAccessor()) { $(‘#‘ + element.id).kendoDatePicker({ format: "MM/dd/yyyy" }); } } }; //这是为包含dateName的元素添加了一个DatePicker
ko.bindingHandlers.valmsg = {
init: function (element) {
element.setAttribute("data-valmsg-for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
//这是利用element的name显示验证信息
ko.applyBindings(viewModel);
});
var OtherSource = function(data) {
var self = this;
self.Test = ko.observable(data.Test);
self.Date = ko.observable(data.Date);
self.Scores = ko.observable(data.Scores);
};
@{
var otherSources = Json.Encode(Model..........);
}
var jsonOtherSources = @Html.Raw(otherSources);
var viewModel = {
OtherSources: ko.observableArray(ko.utils.arrayMap(jsonOtherSources, function(otherSource) {
return new OtherSource(otherSource);
})),
addOtherSource: function() {
this.OtherSources.push({
Test: ko.observable(""),
Date: ko.observable(""),
Scores: ko.observable("")
});
},
removeOtherSource: function(otherSource) {
this.OtherSources.remove(otherSource);
},
};
上述代码的data-bind,addOtherSource,removeOtherSource等在官网都有详细的说明。
那我就只说一下在项目中出现的代码。
uniqueId ，uniqueName是增加的一些属性，用来做验证。最终生成的Html如下：
这样就生成了MVC中 ValidationMessageFor类似的验证代码，帮助我们在在页面层进行验证
当看到uniqueId ，uniqueName的绑定和生成方式之后，觉得这代码N。
这也是我要这篇文章的最初原因。
最后再来一点与本题无关，但是保存时候的需要用到的代码吧
if ($("form#editForm").valid()) {
var data =
$.deparam($("form#editForm").serialize());
data["OtherSources"] =
ko.mapping.toJSON(viewModel.OtherSources);
$.post(‘@Url.Action("actionName", "ctlName", new {area = "***"})‘, data,
function(result)
{
HandleAjaxResult(result);
});
}
var otherSources = Request.Form["OtherSources"];
if
(!string.IsNullOrEmpty(otherSources))
{
var
otherSourceDtos =
JsonConvert.DeserializeObject<List<OtherSourceDto>>(otherSources);
//save data to db…….
}