如何强制 observable 从 DOM 元素中读取值

Posted 2023-03-27

【中文标题】如何强制 observable 从 DOM 元素中读取值

【英文标题】：How to force an observable to read the value from the DOM Element

【发布时间】：2011-11-02 09:33:15

【问题描述】：

我有一个隐藏的输入并将值绑定到我的模型的可观察属性。我正在使用另一个在内部更新隐藏输入值的插件，但是 observable 不会更新它的值。

如何强制 observable 从元素中更新它的值？

类似于 valueHasMutated 但以另一种方式。

谢谢

【问题讨论】：

我通过创建自定义绑定解决了这个问题，该绑定会在插件更改值时更新值。基本上它与这里解释的技术相同：***.com/questions/6612705/…

太棒了！如果可以的话，你应该用你的解决方案来回答这个问题并接受它，这样有同样问题的其他人就可以看到你是如何解决它的。

@Hugo - 你应该把它作为答案发布......这样它可以帮助其他人在未来找到这个问题！

嗨@Hugo Zapata，如果你能发布你的解决方案会很棒，因为我遇到了同样的问题。您可以在 *** 中回答自己的问题。

【参考方案1】：

我知道你已经想出了一个解决方案。

但我想我会发布自己的帖子，以防万一有人遇到这个问题，因为它在 Google 结果中排名靠前，没有答案，所以可能对某人有用。

 ko.bindingHandlers.hiddenInputValue = 

        init: function (element, valueAccessor) 

            $(element).bind("change", function (event, data, formatted)  //hidden vars don't usually have change events, so we trigger $myElement.trigger("change");
                var value = valueAccessor();
                value($(this).val()); //rather than $(this).val(), might be best to pass our custom info in data
            );
        ,
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) 
            var value = valueAccessor();
            $(element).val(value);
        

    ;

还有html

<input type="hidden" name="myName"  id="myId"  data-bind="hiddenInputValue: myModelValue" >

由于隐藏输入通常没有更改事件，因此您需要在更改值时触发自己的事件，例如

$("#myId").trigger("change");

我不确定这是否是最好的解决方案，但我可以在我正在努力的时间范围内提供最好的解决方案 :-) 如果我想出一些更优雅的东西，我可能会在淘汰赛 wiki 中加入一些东西。

【讨论】：

您可以使用内置的值处理程序（data-bind="value: myObservable" 和相同的触发器）获得大部分或全部此功能。

自从我发布此内容后，我上次检查时可能已经更新了淘汰赛，因为默认情况下隐藏输入没有更改事件，淘汰赛无法与正常值绑定一起使用。它现在可以与普通值绑定一起使用吗？

是的，它在 Knockout 2.0.0 中有效（在旧版本中没有尝试过），但您仍然需要手动触发更改。

我根据您的 cmets 尝试了一些方法，每当隐藏输入上的值更新时，只需在隐藏输入上手动触发“更改”事件，其余的将由 Knockout 完成（使用 data-bind="值：myObservable")

嗨@Sebastian Perez 听起来好像在新版本的淘汰赛中不再需要我的自定义 hiddenInputValue。或者我可能以错误的方式接近它，意识到我需要在创建自定义绑定后触发更改事件 :-) 从一开始就不需要 cusotm 绑定 - 哦，好吧 :-) 如果我有机会我会尝试它在旧版本上。

【参考方案2】：

它通过为我的情况添加 $("hiddenInputId").trigger("change"); 而不添加 ko 绑定处理程序来工作。

谢谢！

【讨论】：

这应该是公认的答案，因为最有可能使用 jQuery 来更新隐藏字段的值。如果正在使用另一个库，那么使用该库完成的类似操作将起作用。