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的背景图像属性，但是当我检查observable（cropitImage（））的值时，它不会更新。

任何建议？

Answer 1

谢谢，自定义绑定可以解决问题。

但这不是通常的实施方式。

我们通常使用自定义绑定，以便在可观察的更改时更新关联的DOM元素。

但我的要求是---当用户对DOM元素执行某些操作时，更新相关的observable。

这是代码

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

Knockout绑定没有在jquery插件事件上更新

1 个答案: