Javascript 动态绑定敲除中的图像源

我想将一个新的图像路径绑定到图像，我有一个弹出窗口，在选择复选框时，我得到一个新的图像路径，我需要与父窗口的图像绑定，因此我有一个公共函数，在弹出页面中选择复选框时调用该函数， 下面是我试过的

 <a data-bind="attr:{href: thumburl , target:'_self'}" class="light">
                        <img data-bind="attr: {src: Image} " />
                    </a>

javascript:

<script>
   function parentFunc(path) {
    // I get the new path here. 
    }

 $(function () {
     var audioObject = {
        ID:0,
        Image: "",
        ContentID: 0
    }

    function Audio(data) {
        var self = this;
        this.thumburl = ko.observable("http://localhost:61437/Admin/Thumbnail/Play?ContentID=" + data.ContentID);

        console.log('mapping to js', data);
        ko.mapping.fromJS(data, audioObject, self);
    }
     // as it is an edit page, I am loading the data using id.
    var loadData = function (id) {
        var _url = '/api/v2/my/audio';
        $.ajax({
            type: 'get',
            url: _url + '/' + id,
            success: function (d) {
                if (!!d.error) { console.log(d.message); }
                else {
                    var model = new Audio(d);
                    ko.applyBindings(model, document.getElementById("audioEdit"));
                    console.log(model);
                }
            }
        });
    }

    loadData(@ViewBag.Id);
});

函数parentFunc（路径）{
//我在这里找到了新路。
}
$（函数（）{
var audioObject={
ID:0，
图像：“”，
ContentID:0
}
功能音频（数据）{
var self=这个；
this.thumburl=ko.observable（“http://localhost:61437/Admin/Thumbnail/Play?ContentID=“+data.ContentID）；
log（'映射到js'，数据）；
fromJS（数据、音频对象、自身）；
}
//因为它是一个编辑页面，所以我使用id加载数据。
var loadData=函数（id）{
var_url='/api/v2/my/audio'；
$.ajax({
键入：“get”，
url:_url+'/'+id，
成功：功能（d）{
if（！！d.error）{console.log（d.message）；}
否则{
var模型=新音频（d）；
应用绑定（model，document.getElementById（“audioEdit”）；
console.log（模型）；
}
}
});
}
loadData（@ViewBag.Id）；
});

有什么建议我可以做什么使这项工作？？

---

新的淘汰赛

您正在将视图模型正确应用于视图：

ko.applyBindings(model, document.getElementById("audioEdit"));

但问题是图像属性不在此视图模型内，因此KO无法找到它

你能做的是：

将audioObject设置为视图模型，并添加一个audio属性，该属性最终将保存audio（）对象。使图像属性可见

 var audioViewModel = {
    ID:0,
    Image: ko.observable(""),
    ContentID: 0,
    audio: null
}

创建Audio（）对象，但将其添加到视图模型中：

var model = new Audio(d);
audioViewModel.audio = model;

ko.applyBindings(audoViewModel, document.getElementById("audioEdit"));

与以前一样应用绑定，但应用于新视图模型：

var model = new Audio(d);
audioViewModel.audio = model;

ko.applyBindings(audoViewModel, document.getElementById("audioEdit"));

稍微调整bind语句：

<a data-bind="attr:{href: audio.thumburl , target:'_self'}" class="light">
    <img data-bind="attr: {src: Image} " />
</a>

我在您的代码中发现了一些其他问题，也许我可以构建一个提琴来帮助您修复它们并更好地理解KO

---

编辑：这里有一个提琴，展示了上面的提示，还有一些其他的调整，比如使用一个计算的thumburl：

看起来怎么样