从元素属性值初始化Knockout observable

Question

我有一个元素拥有一个属性,其值绑定到一个knockout observable:

<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元素属性的值？

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

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,则可以存储默认值...