Question

我想知道我是否通过使用MVVM模式和Knockout 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的用武之地。我会改变我的代码看起来像这样： / p>

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());

我一直在阅读关于Knockout中的自定义绑定，这是一条我不得不为此与我自己的小部件绑定的路线吗？

Answer 1

你走在正确的轨道上。这是一个基本的自定义绑定示例，可以执行您想要的操作（未经测试）。

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调用）。如果您希望绑定对可观察更改中的值作出反应，那么您可以向绑定添加更新函数，当绑定到的可观察对象发生更改时，将调用该函数。在这里，您可以重新初始化插件或调整其设置。

希望这有帮助，

淘汰JS建议

1 个答案: