Question

您好我只想创建输入和iframe，当我粘贴YouTube链接时，iframe应该随新的src而改变。到目前为止我已经这样做了

<div class="heading">id <input data-bind="text: youtubeLink"/></div>
<iframe id="player" type="text/html" width="444" height="250" frameborder="0" data-bind="attr: { src: linkEmbed }"></iframe>

在剧本中：

function MyViewModel() {
    this.youtubeLink = ko.observable('https://www.youtube.com/watch?v=4UNkmlCKw9M');
    this.linkEmbed = ko.pureComputed({
        read: function () {
                var extract = this.youtubeLink().replace("/watch?v=", "/embed/");
                console.log(extract)
                return extract;
        },
        write: function (value) {
                 this.youtubeLink();
        },
        owner: this
    });
}
ko.applyBindings(MyViewModel());

这完全符合我的要求，但如果我在输入中粘贴另一个链接，视频就不会改变。

我在淘汰文档中使用此文件：http://knockoutjs.com/documentation/computed-writable.html

Answer 1

你有几个问题：

您不能在模型上调用new，但是您将其作为构造函数编写
您使用text绑定代替value绑定输入
你的计算机写的不会分配，但你还是不需要它

一旦你纠正了它，它就可以了。

function MyViewModel() {
    var model = {};
    model.youtubeLink = ko.observable('https://www.youtube.com/watch?v=4UNkmlCKw9M');
    model.linkEmbed = ko.pureComputed(function () {
        var result = model.youtubeLink().replace("/watch?v=", "/embed/")
        return result;
    });
    return model;
}
ko.applyBindings(MyViewModel());

http://jsfiddle.net/ueoob7ne/2/

Answer 2

TLDR： jQuery 隐藏了敲除绑定错误。

另一件事打破了它......

jQuery 可以捕获异常并隐藏它们。我不得不逐步通过knockout-debug.js 然后jquery.js 直到我得到一个看起来像这样的部分（大约第3600行）

// Only normal processors (resolve) catch and reject exceptions
    process = special ?
        mightThrow :
            function() {
            try {
                mightThrow();
            } catch ( e ) {

你不知道吗...我把手表放在 (e) 上，这是我发现隐藏在那里的东西：

Error: Unable to process binding "text: function(){return ko.toJSON(vm.model(),null,2) }"
Message: Multiple bindings (if and text) are trying to control descendant bindings of the same element

为什么我的applyBindings不起作用？昏死

2 个答案: