在jquery插件事件中未更新敲除绑定

Question

当我使用cropit裁剪图像时，我正在尝试更新样式{ background- image : someobservable }上的敲除绑定，但它不起作用。

<div id="image-cropper">
    <!-- This is where the preview image is displayed -->
    <div class="cropit-image-preview" style="width:300px;height:170px;" data-bind="style: { backgroundImage: 'url(\'' + cropitImage() + '\')' }"></div>

    <!-- This range input controls zoom -->
    <!-- You can add additional elements here, e.g. the image icons -->
    <input type="range" class="cropit-image-zoom-input" />

    <!-- This is where user selects new image -->
    <input type="file" class="cropit-image-input" />

    <!-- The cropit- classes above are needed
    so cropit can identify these elements -->

$(document).ready(function () {
    $('#image-cropper').cropit();
});

当我使用滑块裁剪图像时，它正在更新样式中div的背景图像属性，但是当我检查可观察对象(cropitImage())的值时，它并没有更新。

有什么建议吗？

Answer 1

谢谢，定制绑定做到了这一点。

但这并不是通常的实现。

我们通常使用自定义绑定，以便当可观察对象发生变化时，更新相关的DOM元素。

但我的要求是-当用户在DOM元素上执行某些操作时，更新相关的可观察对象。

下面是代码

ko.bindingHandlers.getImage = {

    init: function (element, valueAccessor) {
        $('#image-cropper').on('change', function () {
            var value = valueAccessor();
            var image = $('#image-cropper').cropit('export', {
                type: 'image/jpeg',
                quality: .7,
                originalSize: true
            });
            value(image);
        });

    },
    update: function (element, valueAccessor) {     
        $('#image-cropper').on('change', function () {
            var value = valueAccessor();
            //var image = $('#image-cropper').cropit('export');
            var image = $('#image-cropper').cropit('export', {
                type: 'image/jpeg',
                quality: .9,
                originalSize: false
            });
            value(image);
        });
        $('#imgPreview').mouseup( function () {
            var value = valueAccessor();
            //var image = $('#image-cropper').cropit('export');
            var image = $('#image-cropper').cropit('export', {
                type: 'image/jpeg',
                quality: .9,
                originalSize: false
            });
            value(image);
        });
    }
};