KO的反射

最近终于在实际项目中使用了 knockout.js，MVVM 模式的双向绑定和通知功能让我兴奋，感觉很不错，这个感觉就像当初从原生的 js 转向 jquery 一样，它开辟了一个新的编写模式，从更高的层次上满足了一些前端应用的需求。jquery 和 knockout 都是我觉得很 nice 的东西，对提高生产力有着很不错的促进作用，它们是前端完美的搭配。

jquery着重解决了同documet交互的问题，knockout着重解决了同business交互的问题

 

knockout.js 在文档方面写的还是比较详尽的，还有Live Examples和Tutorial，让你能很快的上手，不得不再称赞一下。它原生提供了很多的功能，可以满足绝大所数的开发需求了，唯独一点让我觉得有点遗憾，那就是 ko 的初始化，我最初的做法是先输出 json 给 ko 进行初始化，然后让 ko 更新到 UI，这样本身没什么问题，这也是教科书的做法。

 

但是倘若目标是一些零散的数据那就变得很繁琐了，我理想的方式还是直接把零散的数据绑定到UI上，然后让 UI 数据反射到 ko，这样就完美了，这样做还有一个好处：UI 可以及时显示该有的状态，因为通过 json 给 ko 初始化的方式总是会让我看到 ko 初始化后更新 UI 那一霎那的值变化，有点代码洁癖的我可受不了。

 

还好 ko 提供了自定义的扩展功能，使得应用变得无限的宽广了，我的想法也变得有思路来实现了，那就是做一个 reflect binding。

ko.bindingHandlers.reflect = {

    init: function (element, valueAccessor, allValueAccessor, viewModel) {

        // observable value

        var observableValue = valueAccessor(), allAccessor = allValueAccessor();

        if (observableValue === false) { return; }

        // reflect select

        if (element.tagName === 'SELECT') {

            var optionsAccessor = allAccessor['options'],

                txtKey = allAccessor['optionsText'],

                valKey = allAccessor['optionsValue'],

                caption = allAccessor['optionsCaption'];

            var existingOptions = optionsAccessor();

            if (!existingOptions || !existingOptions.length) {

                var options = [];

                if (caption) {

                    var c = {};

                    c[txtKey] = caption;

                    c[valKey] = '';

                    options.push(c);

                }

                $(element).find('option').each(function () {

                    var item = {};

                    item[txtKey] = $(this).text();

                    item[valKey] = $(this).val();

                    options.push(item);

                });

                optionsAccessor(options);

            }

            observableValue($(element).val());

        }

        // reflect textarea

        if (element.tagName === 'TEXTAREA') {

            observableValue($(element).val());

        }

        // reflect input

        if (element.tagName === 'INPUT') {

            var t = element.type.toLowerCase();

            if (t === 'text' || t === 'hidden') {

                observableValue($(element).val());

            }

            if (t === 'radio' || t === 'checkbox') {

                var target = element;

                if (element.name) {

                    var find = $('input[name="' + element.name + '"]:checked');

                    if (find.length > 0) { target = find.get(0); }

                }

                var elval = $(target).val();

                if (target.checked && elval) {

                    observableValue(elval);

                } else {

                    observableValue(target.checked);

                }

            }

        }

    }

};

<select data-bind="reflect:Passenger, value:Passenger, options:PassengerOptions, optionsText:'tint', optionsValue:'vint'">

    <option value="1">1 person</option>

    <option value="2">2 persons</option>

    <option value="3">3 persons</option>

</select>

<input type="text" data-bind="reflect:Destination, value: Destination" value="XMN" />

function modelClass() {

    this.Passenger = ko.observable();

    this.PassengerOptions = ko.observableArray([]);

    this.Destination = ko.observable();

}

ko.applyBindings(new modelClass());

 

使用时只需确保 reflect binding 放在 data-bind 第一位即可，这个 reflect binding 是对表单元素的反射绑定，可以按照这个原理在任意 html 元素上反射自己所需要的值。