Question

我正在尝试使用敲除绑定来扩展JQUERY UI自动完成小部件。

我想做的是。

<input ccid="N1" controltype="MESAutoComplete" data-bind="MESAutoComplete: { dataTextField: 'FruitName', data:N1.CustomItems, value: N1.Value, search: search, enable: N1.Enable }" /></div>

在运行时，我将获得上面的输入元素并指定

$.widget("custom.skeltacomplete", $.ui.autocomplete, {    
_renderItem: function (ul, item)
{
    var t = '',
        result = '';

    $.each(this.options.columns, function (index, column)
    {
        t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
    });

    result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
    return result;
},
enableMonitor: '.theEnableMonitor'    
});

这一步之后。

$(element).skeltacomplete(
           {
               showHeader: true,
               columns: [{
                   name: 'ID',
                   width: '150px',
                   valueField: 'FruitId'
               },
               {
                   name: 'Name',
                   width: '120px',
                   valueField: 'FruitName'
               },
               {
                   name: 'Type',
                   width: '120px',
                   valueField: 'FruitType'
               }],

               // Event handler for when a list item is selected.
               select: function (event, ul)
               {
                   alert("sss = " + ul.item + " and items = " + ul.items);
                   this.value = (ul.item ? ul.item.FruitName : '');
                   return false;
               },

               // The rest of the options are for configuring the ajax webservice call.
               minLength: 1,
               source: function (request, response)
               {


var data = [{ "FruitId": "1", "FruitName": "apple", "FruitType": "Veg" }, { "FruitId": "2", "FruitName": "orange", "FruitType": "fruit" }];                       var   controlData = jQuery.grep(data, function (eachArrayItem)
                   {
                       return eachArrayItem[“FruitName”].indexOf(request.term) > -1;
                   });

                   response(controlData);
               }                 
           }
           );

现在我的问题是 我想在小部件上有自定义函数说myEnable：'IDontKnowFunction（）' 每当视图模型中的启用或值发生更改时，我想挂钩上面的函数或窗口小部件的相应功能，这将使窗口小部件启用/禁用。

请指教。一个例子会有很大的帮助。

Answer 1

我自己得到了解决方案。

enabled: function (propValue, element)
               {
                   if (!propValue)
                   {
                       $(element).Skeltacomplete("disable");
                       $(element).attr("disabled", true);
                   }
                   else
                   {
                       $(element).Skeltacomplete("enable");
                       $(element).attr("disabled", false);
                   }
               },

我将上面的代码添加到

$（元素）.skeltacomplete（ {}

来自计算函数，如果observable（enable）已更新，则我会匿名触发该函数。它目前适用于ReadOnly，Enable和Value，这是我的要求。

感谢您的帮助。

Knockout + JQuery UI自动完成

1 个答案: