Question

我想绑定一个新的图像路径到图像，我有一个弹出窗口，在选择复选框，我得到一个新的图像路径，我需要与父窗口的图像绑定，所以我有一个公共功能，在弹出页面中选中复选框时调用以下是我的尝试，

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

有关我可以做些什么来做这项工作的任何建议？淘汰赛的新手！

Answer 1

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

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

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

你可以做的是：

使audioObject成为您的视图模型并添加最终将保存Audio（）对象的音频属性。使Image属性可观察。

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

稍微调整绑定语句：

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

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

编辑：这是一个小提琴，显示上面的提示，还有一些其他的调整，比如使用计算器为thumburl：

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

看起来怎么样？

动态结合击倒中的图像源

1 个答案: