v4/zh/vendors/dt/0.0.1/ui/Text.js

/**
 * @file 最简单的文本，能随valueOb联动变化。
 * @author sushuang(sushuang@baidu.com)
 */

define(function (require) {

    var lib = require('../lib');
    var Component = require('./Component');

    /**
     * 模板中的声明方法举例：
     *  <div data-cpt="
     *      type: 'dt/ui/Text',
     *      name: 'myText',
     *      viewModel: {
     *          value: viewModel.valueOb,
     *          css: 'dtm-text'
     *      }">
     *  </div>
     *
     * @class
     * @extends dt/ui/Component
     */
    var Text = Component.extend({

        _define: {
            css: 'dtui-tx',
            viewModel: function () {
                return {
                    // 可以配合obDecorator/htmlInputDecorator使用。
                    value: lib.ob(''),
                    encodeHTML: lib.ob(true)
                };
            },
            viewModelPublic: ['value', 'encodeHTML']
        },

        /**
         * @override
         */
        _init: function () {
            var viewModel = this._viewModel();
            var valueOb = viewModel.value;
            var encodeHTMLOb = viewModel.encodeHTML;

            viewModel.value.subscribe(handleChange, this);
            viewModel.encodeHTML.subscribe(handleChange, this);

            // Init.
            handleChange.call(this);

            function handleChange() {
                var text = valueOb();
                if (encodeHTMLOb()) {
                    text = lib.encodeHTML(this._stringify(text));
                }
                this.el().innerHTML = text;
            }
        },

        _stringify: function (value) {
            if (value == null) {
                return '';
            }
            return String(value);
        },

        /**
         * @override
         */
        _dispose: function () {
            this.$el().html('');
        }

    });

    return Text;
});