数据绑定隐藏字段值

Question

我在淘汰版模板中有一个隐藏字段，它的值用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>

ViewModel

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) {},
            });
        };
    }

Answer 1

如果您使用的是knockout.js，您不需要修改DOM，您可以只更新ViewModel，并且DOM将根据

function getFileDetail(fileID, fileName) {
    viewModel.fileViewModel.update(fileID, fileName);
}

在update中添加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
    };
}

注意：请注意，由于属性不是observable，所以在Files中有一个不会随update函数更改的默认项。

self.Files = ko.observableArray([{ ID: 1, fileName: "", removeFile: function (file) { self.Files.remove(file); }}]);

您可以通过使它们成为observable (即ID: observable(1))或创建一个new FileViewModel()来解决这个问题。

注意： viewModel必须在函数(即全局实例)中是可访问的，否则将是undefined。

Answer 2

您的模型属性ID是可观察的，因此您需要在连接时‘解包装’才能从中获得值，如下所示：

<input type="hidden" name="hdnFileName" data-bind="attr: { id: 'hdnFileName' + ID(), value: fileName }" />

这是：

<label data-bind="text: 'File Upload ' + ID(), attr: { id: 'lblFileName' + ID() }"></label>

Answer 3

在我看来，通过DOM设置字段的值并不会与剔除交互。如果使用.value设置其值，则不会更新可观察到的值。你应该更新可观察到的。

我写了一篇文章来证明。每2秒，它通过DOM设置输入的值，但是绑定仅在键入某些内容时才会发生变化。

http://jsfiddle.net/qcv01h2e/

var viewModel = (function () {
    return {
        fv: ko.observable().extend({notify:'always'})
    };
}());

ko.applyBindings(viewModel);
setInterval(function () {
    console.debug("Set it");
    var f = document.getElementById('field');
    f.value = "Hi";
    console.debug("fv is", viewModel.fv());
}, 2000);