ajax – knockoutjs数据绑定隐藏字段值

我在一个淘汰模板中有一个隐藏字段,它的值用 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必须在函数(即全局实例)中可访问,否则将是未定义的.