2012-03-02 95 views
2

我想知道如果我要下去了使用MVVM模式和淘汰赛JS这样做的正确的路线,这是我目前的情况:淘汰赛JS建议

ASCX: 
<asp:TextBox runat="server" ID="TextboxDescription" Width="300" ClientIDMode="Static" /> 

JS: 
$('#TextboxDescription').limitCharacters({ 
       limit: 1000, 
       alertClass: 'error', 
       id_result: 'description_limit', 
       align: 'right' 
}); 

所以你看,我有依靠文本框始终被称为“TextboxDescription”,这是我认为 MVVM进来我会改变我的代码看起来是这样的:

ASCX: 
<asp:TextBox runat="server" ID="TextboxDescription" Width="300" ClientIDMode="Static" data-bind="{ not even sure what goes here, no Knockout load event? }" /> 

JS: 
function ViewModel() { 
    setLimit = function(limit, alert, id, align) { 
      // code here to call limitCharacters on sender(?!) 
    } 
}; 

ko.applyBindings(new ViewModel()); 

我一直在阅读有关自定义绑定在淘汰赛中,这是我必须要走的一条路线为了与我自己的小部件绑定,下去?

回答

2

你是在正确的轨道上。这是一个基本的示例自定义绑定,应该做你想做的事(未经测试)。

ko.bindingHandlers.limitCharacters = { 
    init: function(element, valueAccessor) { 
     // this gets called at the start when the element is first bound 
     // use it to bind event handlers widgets etc 
     var $element = $(element), 
      limit = ko.utils.unwrapObservable(valueAccessor()); // this gets the value of the object on the rhs of the binding 

     $element.limitCharacters({ 
       limit: limit, 
       alertClass: 'error', 
       id_result: 'description_limit', 
       align: 'right' 
     }); 
    } 
} 

你现在结合会是什么样子

<asp:TextBox runat="server" ID="TextboxDescription" Width="300" ClientIDMode="Static" data-bind="limitCharacters: 1000" /> 

目前的限制可能是可观察的,而不是简单地1000(注意unwrapObservable调用)。如果您希望绑定对可观察值更改中的值作出反应,那么您可以将更新函数添加到将绑定到的可观察值发生更改时调用的绑定。在这里,您可以重新初始化您的插件或调整它的设置。

希望这有助于

+0

惊人的答案,谢谢你了 - 真的要帮我一起在我的基因敲除实现:) – 2012-03-03 10:43:27

+0

没问题。 Knockout祝你好运,这真的改变了我写JavaScript的方式。 – madcapnmckay 2012-03-03 15:54:20

+0

我可以看到它也一样!还有一件事,如果你有时间,你如何通过2个变量来传递?与示例相同,只需通过json样式数组?像{limit:1000,alertClass:'alert'}? – 2012-03-04 10:35:37