使用knockout对fileupload控件进行双向绑定?

时间:2014-03-17 21:10:54

标签: jquery knockout.js

使用具有自定义绑定的文件上载控件来更新可观察对象不会有问题,这会导致上传的文件存储在图像上传文件夹中。

但是如何反向执行此操作以便在编辑文章时我可以再次检索“文件对象”以链接到fileupload控件?因为它绑定到自定义绑定,所以无法手动设置其中的observable(我试图将imageURL设置为我知道存在的路径,但该值不会粘住并保持未定义。)

我相信我需要以某种方式将主“文件”可观察再次设置为文件对象,但是我不知道如何通过我的ajax调用来完成 - 我将如何返回“文件”,就像它一样刚刚在fileupload控件中被选中了?

<input type="file" id="articleImage" data-bind="fileUpload: imageFile, fileObjectURL: imageObjectURL" />

ko.bindingHandlers.fileUpload = {
    init: function (element, valueAccessor) {
        $(element).change(function () {
            var file = this.files[0];
            if (ko.isObservable(valueAccessor())) {
                valueAccessor()(file);
            }
        });
    },

    update: function (element, valueAccessor, allBindingsAccessor) {
        var file = ko.utils.unwrapObservable(valueAccessor());
        var bindings = allBindingsAccessor();

        if (bindings.fileObjectURL && ko.isObservable(bindings.fileObjectURL )) {
            var oldUrl = bindings.fileObjectURL ();
            if (oldUrl) {
                windowURL.revokeObjectURL(oldUrl);
            }
            bindings.fileObjectURL (file && windowURL.createObjectURL(file));
        }
   }
};

当我在编辑文章时从文件加载数据并尝试将imageObjectURL设置为字符串时,它只是忽略它并将其保留为null。如果我从data-bind html定义中删除第二个参数,我可以直接设置observable。

imageObjectURL也绑定到图像控件,当我选择图像时工作正常,而不是当我尝试从文件设置它时。

imageObjectURL("//path/to/image/image.jpg")

不起作用 - imageObjectURL保持“未定义”,除非我从数据绑定定义中删除它。

0 个答案:

没有答案