ajax – knockoutjs数据绑定隐藏字段值
发布时间:2020-12-16 02:48:50 所属栏目:百科 来源:网络整理
导读:我在一个淘汰模板中有一个隐藏字段,它的值用 jquery更新.问题是当尝试使用ajax将此值传递给服务器时,我在控制器中获取null值.但是html源代码显示隐藏字段的值已更新.如果我用文本框替换隐藏字段,只有在我手动输入文本时它才能正常工作. jQuery的 function ge
我在一个淘汰模板中有一个隐藏字段,它的值用
jquery更新.问题是当尝试使用ajax将此值传递给服务器时,我在控制器中获取null值.但是html源代码显示隐藏字段的值已更新.如果我用文本框替换隐藏字段,只有在我手动输入文本时它才能正常工作.
jQuery的 function getFileDetail(fileID,fileName) { $('#hdnFileName' + fileID).val(fileName); $('#lblFileName' + fileID).text(fileName); } 这是html淘汰赛模板: <script type="text/html" id="fileTemplate"> <div data-role="fieldcontain"> <a href="#" data-bind="click: function () { openFileUpload('file',ID) }"><label data-bind="text: 'File Upload ' + ID,attr: { id: 'lblFileName' + ID }"></label></a><input type="button" value="Remove" data-bind="click: removeFile" /> </div> <input type="hidden" name="hdnFileName" data-bind="attr: { id: 'hdnFileName' + ID,value: fileName }" /> </script> 视图模型 function FileViewModel() { var self = this; self.ID = ko.observable(); self.fileName = ko.observable(); self.removeFile = function (file) { }; self.Files = ko.observableArray([{ ID: 1,fileName: "",removeFile: function (file) { self.Files.remove(file); }}]); self.addNewFile = function () { var newFile = new FileViewModel(); newFile.ID = self.Files().length + 1; newFile.fileName = ""; newFile.removeFile = function (file) { self.Files.remove(file); }; self.Files.push(newFile); //$("input[name='hdnFileName'").trigger("change"); } } function ViewModel() { var self = this; self.fileViewModel = new FileViewModel(); self.submitForm = function () { $.ajax({ type: "POST",url: "<%= Url.Action("MeetingPresenter")%>",data: "{Files:" + ko.utils.stringifyJson(self.fileViewModel.Files) + "}",contentType: "application/json",success: function (data) {},}); }; } 解决方法
如果你正在使用knockout.js你不需要修改DOM,你可以只更新ViewModel,DOM将根据
function getFileDetail(fileID,fileName) { viewModel.fileViewModel.update(fileID,fileName); } 在FileViewModel中添加更新功能 function FileViewModel() { // rest of the code self.update = function(fileID,fileName) { var file = ko.utils.arrayFirst(self.Files(),function(file) { return file.ID == fileID; }); file.fileName(fileName); // this will change and the UI will be updated according }; } 注意:请注意,文件中的默认项目不会随更新功能而更改,因为属性不可观察 self.Files = ko.observableArray([{ ID: 1,removeFile: function (file) { self.Files.remove(file); }}]); 你可以通过使它们可观察来解决这个问题(即ID:observable(1)),或者你可以创建一个新的FileViewModel(). 注意:viewModel必须在函数(即全局实例)中可访问,否则将是未定义的. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |