使用KnockoutJS捕获自定义的jQueryUI小部件内的数据改变

使用KnockoutJS自定义绑定捕获自定义的jQueryUI小部件内的数据改变

定义要绑定的数据

function ViewModel(){
	var self = this;
	self.club =  ko.observable("");
}

HTML代码

绑定创建的自定义绑定superDialog

<input type="text" id="club" autocomplete="off" data-bind="superDialog:{ value: club }"/>

创建自定义绑定并调用

$(document).ready(function(){
	ko.bindingHandlers.superDialog = {
        init: function(element, valueAccessor, allBindings) {
            var $el = $(element);//界面绑定的元素（input）
            var binds = valueAccessor();//界面绑定的superDialog{}里面的参数
            //自定义jQueryUI组件superDialog
            $el.superDialog({
                clubsinfo:JSON.parse(localData.get("clubs")),
                changed: function(data){//在change事件里面更改界面绑定的club值
                    binds.value(element.value);
                }
            });
        },
        update: function(element, valueAccessor, allBindings){
            var binds = valueAccessor();
            var $el = $(element);
            element.value = binds.value();
        }
    };
    var vm = new ViewModel();
    ko.applyBindings(vm);
});

jQueryUI小部件

(function ($) {
    $.widget( "custom.superDialog", {
        options:{
            clubsinfo:[],
            clubslist:"",
            arr0:[],
            selectedValue: [],
            changed: function(data){//主要是创建一个change事件

            }
        },
        _create:function(){
            this._initelement();
            this._initevent();
        },
        _initelement:function(){
            var self  = this,
                options = self.options,
                element = self.element;
            var fillhtml = '<ul class="hidden datalist" id="datalist" style="position: absolute"></ul>';
            element.after(fillhtml);
            self._cluboption();
            
        },
        _initevent:function(){
            var self  = this,
                element = self.element;
            element.on("focus",element,self._show);
            $(".li-item").on("click",self,self._chooseitem);
            $(document).bind("click",self,self._binddo);
        },
        _cluboption:function(){
            var self = this,
                options = self.options;
                var id  = 0;
            for (let i = 0; i < options.clubsinfo.length; i++) {

                const element = options.clubsinfo[i];
                options.clubslist += '<li class="li-item">'+element.subject+'</li>'
                id= id+1;
                var nem ={
                    id: id.toString(),
                    value: element.subject
                }
                options.selectedValue.push(nem)
            }
            $("#datalist").append(options.clubslist);
        },
        _show:function(){
            $(".datalist").removeClass("hidden");
        },
        _chooseitem:function(event){
            var self = event.data,
            options = self.options;
            var item0 = this.innerText;
            let arr3 = options.arr0.map(v=>v.value)
            $.each(options.selectedValue,function(i,v){
                if (v.value.indexOf(item0)!==-1 && arr3.indexOf(item0)==-1) {
                    options.arr0.push(v)
                }
            })
            arr3 = options.arr0.map(v=>v.value);
            var subList = arr3.join(',');
            $(self.element).val(subList);
            options.changed.call(self, options.arr0);//arr0更改时调用change事件
        },
        _binddo:function(e){
            var e = e || window.event; //浏览器兼容性
            var elem = e.target || e.srcElement;
            //判断点击的是输入框
            if (elem.id && elem.id=='club') {
                return;
            }
            $(".datalist").addClass("hidden") //点击的不是div或其子元素
        },
        refresh:function(){
            var self = this,
            options = self.options;
            options.arr0 = [];
            
        }

        
    });
})(jQuery);

call()

call与apply的第一个参数都是要传入给当前对象的对象，及函数内部的this，后面的参数都是传递给当前对象的参数。
语法：obj1.call(obj2[,param1,param2,…])；
定义：用obj2对象来代替obj1，调用obj1的方法。即将obj1应用到obj2上；