【问题标题】:Knockout + customBinding not updating淘汰赛 + customBinding 未更新
【发布时间】:2012-10-21 05:30:38
【问题描述】:

我有一个关于 customBindings 的快速问题,希望有人能帮我解释一下吗?我认为当一个 observable 被更新时,任何绑定到该 observable 的 customBinding 都会调用它的“update”方法。我可以看到,当我更新我的 observable 时,正在通知其他订阅者,但似乎没有调用 customBinding。

这是我的视图模型:

var innerModel = {
    name: ko.observable('junk')
};

var innerModel2 = {
    name: ko.observable('junk2')
};

var viewModel = {
    im1: innerModel,
    im2: innerModel2,
    selectedModel: ko.observable({name:'xxx'})
};

这是我的自定义绑定:

ko.bindingHandlers.custom = {
    update: function(element, valueAccessor) {
        console.log("BAM!");
        while (element.firstChild)
            ko.removeNode(element.firstChild);

        ko.renderTemplate('test', valueAccessor(), {}, element, 'replaceNode');

    }  
};

我的模板只是一个显示“名称”字段的跨度:

<script id='test' type='text/html' charset='utf-8'>
<span data-bind='text: name'></span>
</script>

这是我与 customBinding 一起使用的 HTML:

<div id="container" data-bind="with: viewModel">
    <div data-bind="custom: selectedModel">
    </div>
</div>

当我将 selectedModel 更新为两个 innerModel 中的任何一个时,会显示正确的名称,但不会调用 customBinding 的“更新”函数。我有一个单独的“selectedModel”观察者订阅者:

viewModel.selectedModel.subscribe(function(newValue) {
    console.log(newValue.name());
});

当我更改 selectedModel 时会调用它,那么为什么不调用 customBinding 的更新?

这是一个显示问题的 jsfiddle: http://jsfiddle.net/gperng/twAcJ/

任何帮助将不胜感激!

【问题讨论】:

    标签: knockout.js


    【解决方案1】:

    您需要调用以下函数才能使其工作:

    var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor())
    

    试试这个小提琴更多:http://jsfiddle.net/twAcJ/13/

    【讨论】:

    • 这实际上对我不起作用。它只打印“BAM!”一次,永远。尽管多次按下所有按钮。请注意,我选择了淘汰赛 3.0.0(虽然 2.3.0 也不起作用)。
    【解决方案2】:

    在这种情况下,您对with 的使用是错误的。如果你使用它,它会像你期望的那样工作:

    <div id="container" data-bind="with: selectedModel">
        <div data-bind="custom: $data">
        </div>
    </div>
    

    这是因为在您的示例中,custom 绑定不是在 selectedModel 上,而是在整个 viewModel 本身上,它不会改变。

    这是它的 jsfiddle:http://jsfiddle.net/soniiic/twAcJ/7/

    【讨论】:

    • 我不是 100% 这是有道理的。如果我使用“with”绑定取出 div,我仍然会遇到与以前相同的问题(尽管 observable 已更改,但未调用自定义绑定的更新处理程序)。此外,在您的示例中,每次都会调用自定义绑定的“init”(因为父级是可观察的并且它已经改变,所以下面的所有子元素都被重新渲染)。见jsfiddle.net/gperng/6nw8B,我添加了一个“init”函数,你可以看到绑定每次都被重新初始化。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-08
    • 2014-10-18
    相关资源
    最近更新 更多