0

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

这是我的页面的简化版本的小提琴 - http://jsfiddle.net/TurUh/4/

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

难道我做错了什么？谁能建议如何解决这个问题？

4

2 回答 2

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 还需要在项目数组中制作成一个可观察的对象。

于 2012-09-25T12:52:26.933 回答
0

管理错误的最佳方法：

 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 }" />
于 2015-05-07T15:26:45.667 回答