0

我正在尝试使用淘汰赛绑定扩展 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()' 每当视图模型中的启用或值发生变化时，我想挂钩到上述功能或小部件的相应功能，这将使小部件启用/禁用。

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

4

1 回答 1

0

我自己得到了解决方案。

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

我将上面的代码添加到

$(元素).skeltacomplete({}

从计算函数中，如果可观察（启用）已更新，那么我会匿名触发该函数。它目前适用于只读、启用和值，这是我的要求。

谢谢你的帮助。

于 2013-11-15T11:36:38.483 回答