JavaScript事件，没有更新knockout observable /模型值

我有一个文本字段，它与Keyup &更改事件连线，以修剪字段长度。JavaScript事件，没有更新knockout observable /模型值

@Html.TextBoxFor(m => m.zipCode, new {data_bind = "textInput: zipcode, event: { keyup: trimField, change: trimField }", maxlength = "5"})

修正功能，

function trimField(data, event) { 
    var obj = event.target; 
    var maxlength = parseInt(obj.getAttribute('maxlength'), 10); 
    obj.value = obj.value.substring(0, maxlength); 
    obj.focus(); 
    return true; 
}

如果我输入 “123456”，在用户界面上显示 “12345”，但该模型有 “123456”。

如何在keyup事件后更新模型？从5〜6

来源

2016-08-23 user472269

你列出的maxlength为 “5”。尝试将其更改为“6” – ElenaDBA

我想让我的模型成为“12345”，而不是6 – user472269

您没有更新绑定到您的元素的observable变量。最好将它作为一个可观察的扩展来使用，因此它可以在任何地方根据最大长度使用，并确保它遵循您的规则以获得初始值。

实施例：https://jsfiddle.net/kyr6w2x3/55/

HTML：

<input data-bind='textInput: zipCode' /> 
<div> 
    zip code in Model:<span data-bind="text:zipCode"></span> 
</div>

JS：

function AppViewModel(input) { 
    this.zipCode = ko.observable(input).extend({ maxLength:5}); 
    this.phone = ko.observable(input).extend({ maxLength:11}); 
    } 



ko.extenders.maxLenght = function(target, characters) { 
    //you can use this to show an error message on view 
    // target.validationMessage = ko.observable(); 

    //define a function to do validation for maxLength 
    function validate(newValue) { 

    var maxlength = parseInt(characters, 10); 
    if(newValue){ 
     target(newValue.substring(0, maxlength)); 
    } 

    } 

    //initial validation 
    validate(target()); 

    //validate whenever the value changes 
    target.subscribe(validate); 

    //return the original observable 
    return target; 
}; 

ko.applyBindings(new AppViewModel("12345678910"));

来源

2016-08-23 21:23:54

看起来很有趣！谢谢。让我试试这个 – user472269

试图理解“target.validationMessage = ko.observable（）;” ？ – user472269

这是一个绑定到目标的消息变量，所以在验证函数中，您可以在未通过验证时使用消息进行设置，然后在您的视图中，只要出现错误，消息就会显示出来。因为您正在强制您可以删除该验证消息。 –

变化的maxlength：

@Html.TextBoxFor(m => m.zipCode, new {data_bind = "textInput: zipcode, event: { keyup: trimField, change: trimField }", maxlength = "6"})

来源

2016-08-23 21:06:35 ElenaDBA

我希望我的模型成为“12345”而不是6 – user472269

但根据您的建议，您的模型有6位数 - “123456” – ElenaDBA

是的，那是我现在的问题。我能够将控制值从“123456”更新为“12345”，但型号获得了“123456”，假设为“12345” – user472269

停止修改DOM。这是Knockout的工作。您只需修改数据项，Knockout将确保UI是正确的。

function trimField(data, event) { 
    var obj = event.target; 
    var maxlength = parseInt(obj.getAttribute('maxlength'), 10); 
    data.zipcode(data.zipcode().substr(0, maxlength)); 
    return true; 
}

来源

2016-08-23 21:15:35

JavaScript事件，没有更新knockout observable /模型值

回答

相关问题