从元素属性值初始化 Knockout observable答案

【问题标题】：Initialize Knockout observable from element attribute value从元素属性值初始化 Knockout observable
【发布时间】：2012-07-16 14:15:09
【问题描述】：

我有一个元素拥有一个属性，该属性的值绑定到可淘汰的可观察对象：

<text transform='matrix(1 0 0 1 1 1)' data-bind='attr:{transform:textTransform}'></text>

当元素加载时，我希望 observable 包含在 dom 元素上定义的值，但是它加载为 undefined 并且属性从 dom 元素中全部删除：

<text data-bind='attr:{transform:textTransform}'></text>

是否可以从 dom 元素属性初始化可观察到的淘汰赛的值并保持 dom 元素属性的值？

更新：http://jsfiddle.net/5Z2SC/10/

【问题讨论】：

标签： javascript knockout.js knockout-2.0

【解决方案1】：

另一种选择是使用自定义绑定，并在 init 函数中收集元素的当前值。在我看来，这更可重用。

ko.bindingHandlers.transform = {
    init: function(element, valueAccessor) {
        valueAccessor()(element.getAttribute('transform'));
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.setAttribute('transform', ko.utils.unwrapObservable(value))
    }
};

当然，你的会更复杂，因为你必须做这个转换属性的东西。该逻辑可能需要进入update 部分。

【讨论】：

【解决方案2】：

在调用 ko.applyBindings() 之前不会解析数据绑定属性。因此，如果您需要从元素中获取属性数据，您可以这样做。

function MyModel(){
    this.textTransform = ko.observable($('#myElement').attr('transform'));
}

ko.applyBindings(new MyModel());

基本上，您正在获取属性的值并将其设置为可观察对象的初始值。 data-bind 属性是一个模板，因此应在 ViewModel 中指定初始值或默认值。

另一种选择是编写一个自定义活页夹，如果 observable 返回 null，它可以存储默认值...

【讨论】：

谢谢，但我选择了自定义绑定处理程序。在这种情况下，初始化的 observables 的硬编码默认值不是我要寻找的，因为元素属性值会根据加载的不同而有所不同。