Question

我第一次使用淘汰赛，我正在尝试创建一个网页，允许用户创建包含图片网址的项目列表。我已设法对img src属性进行数据绑定，但如果我稍后使用jquery函数更新它，则在保存淘汰模型时，不会采用新的src值。

以下是我的网页简化版的小提琴 - http://jsfiddle.net/TurUh/4/

如果单击“保存”按钮，则可以看到模型采用原始图像src（test.png）。如果您随后使用“更改图像”按钮将图像src更新为（changed.png），则可以使用firebug进行测试以确认html已更改。如果再次单击“保存”按钮，则模型将使用旧的src值（test.png）。

我做错了吗？任何人都可以建议如何解决这个问题吗？

Answer 1

你走在正确的轨道上，但是你已经不再使用代码中的Knockout对象，而是在按钮点击时更新ViewModel。

我已在此处更新您的代码，以便正常运行，看看您的想法：

http://jsfiddle.net/TurUh/6/

对于解决此问题的任何其他人来说，changeImage函数需要放入ViewModel并且ViewModel对象需要更新，例如：

// Update the whole project array
self.changeImages = function() {
   for(var i=0; i < self.projects().length; i++)
   {
         self.projects()[i].ImageURL('changed.png');
   }
};

请记住，ImageURL还需要在项目数组中创建一个可观察对象。

Answer 2

管理错误的最佳方式：

 ko.bindingHandlers.img = {

    // Mise à jour de l'image
    update: function (element, valueAccessor) {
        // Données de l'observable
        var value = ko.utils.unwrapObservable(valueAccessor()),
            src = ko.utils.unwrapObservable(value.src),
            fallback = ko.utils.unwrapObservable(value.fallback),
            $element = $(element);

        // On set l'url de l'image, si fichier innaccesible alors on set le src à fallback (url par défaut)
        if (src) {
            $element.attr("src", src);
        } else {
            $element.attr("src", fallback);
        }
    },

    // Init de l'image
    init: function (element, valueAccessor) {
        var $element = $(element);

        $element.error(function () {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                fallback = ko.utils.unwrapObservable(value.fallback);

            $element.attr("src", fallback);
        });
    }
};

<img class="img-rounded img-responsive center-block" data-bind="img: { src: pictureUrl, fallback: _pictureDefault }" />

使用IMG src的淘汰模型 - 不保存新值

2 个答案: