javascript - 动态绑定(bind)挖空图片源

Question

我想将一个新的图像路径绑定(bind)到图像，我有一个弹出窗口，在选中复选框的地方，我得到一个新的图像路径，我需要将其与父窗口的图像绑定(bind)，所以我有一个公共(public)函数，它在弹出页面中选择复选框时被调用， 以下是我尝试过的，

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

关于我可以做些什么来完成这项工作有什么建议吗？ knockout 新手!!

Answer 1

您正在正确地将 View 模型应用于您的 View :

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

但问题是 Image 属性不在这个 View 模型中，所以 KO 找不到它。

你可以做的是:

使 audioObject 成为您的 View 模型并添加一个音频属性，该属性最终将保存 Audio() 对象。使 Image 属性可观察。

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

创建您的 Audio() 对象，但将其添加到 View 模型中:

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

像以前一样应用绑定(bind)，但使用新的 View 模型:

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>

然后您的 parentFunc 需要设置 Image observable:

function parentFunc(path) {
    // I get the new path here.
    audioViewModel.Image(new_image_path); 
}

我在您的代码中发现了一些其他问题，也许我可以构建一个 fiddle 来帮助您解决这些问题并更好地理解 KO。

---

编辑:这里有一个 fiddle ，显示了上面的提示，还有一些其他的调整，比如对 thumburl 使用计算:

http://jsfiddle.net/a7KVd/1/

看起来怎么样？