Question

我有一个元素拥有一个属性，其值绑定到一个可挖掘的可观察对象：

<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元素属性初始化knockout observable的值并同时保留dom元素属性的值？

Answer 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部分。

Answer 2

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

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

ko.applyBindings(new MyModel());

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

另一个选项是编写一个自定义绑定器，如果observable返回null，则可以存储默认值...

从元素属性值初始化Knockout observable

2 个答案: