更正knockout.js中字段值的正确方法

时间:2022-12-03 12:54:16

my model -

我的模特 -

public class Model2
        {
            public String Text1;
            public String Text2;
        }

action method -

行动方法 -

public ActionResult Index()
        {
            Model2 model = new Model2();
            model.Text1 = "a";
            return View("Index2", model);
        }

html -

<input id="text1" type="text" data-bind='value: Text1, keyup: OnText1Change'>
        <input id="text2" type="text" data-bind='value: Text2'>
        <button onclick="PostIndex2Data()">Post Data</button>
<script type="text/javascript">
        var data = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
        BindIndex2Data();
</script>

javascript -

function BindIndex2Data() {
    viewModelData = ko.mapping.fromJS(data);

   viewModelData.OnText1Change = function () {
    var value = viewModelData.Text1;
    value = value + 1;//or perform some claculation here
    viewModelData.Text2 = ko.observable(value);
    }

    ko.applyBindings(viewModelData);
}

All i am trying to do here is get the value from text1, perform some calculation on that value and assign that value to text2.

我在这里尝试做的就是从text1获取值,对该值执行一些计算并将该值赋给text2。

Is this the correct way to implement "ontextchange" event in knockout?

这是在淘汰赛中实施“ontextchange”事件的正确方法吗?

For some reason my OnText1Change event is not getting called here. Please help!

出于某种原因,我的OnText1Change事件未在此处调用。请帮忙!

1 个解决方案

#1


0  

Knockout is a two-way binding framework. You do not handle events to change data, you just setup your viewmodel and bindings and trust it to do the work for you. So first you need to remove keyup: OnText1Change and remove function viewModelData.OnText1Change.

Knockout是一个双向绑定框架。您不处理更改数据的事件,您只需设置您的viewmodel和绑定并信任它为您完成工作。首先你需要删除keyup:OnText1Change并删除函数viewModelData.OnText1Change。

To change the value of an observable, after you first create it with viewModelData.Text2 = ko.observable(''), you call it like a function:

要更改observable的值,在首次使用viewModelData.Text2 = ko.observable('')创建它之后,可以将其称为函数:

viewModelData.Text2(value);

If you want the value of text2 to depend on the value of text 1, you define it like this:

如果您希望text2的值取决于文本1的值,则可以像这样定义它:

viewModelData.Text2 = ko.computed(function(vm) {
    return vm.Text1() + "something";
}, viewModelData);

If you want to bind text2, and also have the ability to update it programmatically:

如果要绑定text2,并且还能够以编程方式更新它:

viewModelData.Text1.subscribe(function(value) {
    viewModelData.Text2(value + "something");
});

#1


0  

Knockout is a two-way binding framework. You do not handle events to change data, you just setup your viewmodel and bindings and trust it to do the work for you. So first you need to remove keyup: OnText1Change and remove function viewModelData.OnText1Change.

Knockout是一个双向绑定框架。您不处理更改数据的事件,您只需设置您的viewmodel和绑定并信任它为您完成工作。首先你需要删除keyup:OnText1Change并删除函数viewModelData.OnText1Change。

To change the value of an observable, after you first create it with viewModelData.Text2 = ko.observable(''), you call it like a function:

要更改observable的值,在首次使用viewModelData.Text2 = ko.observable('')创建它之后,可以将其称为函数:

viewModelData.Text2(value);

If you want the value of text2 to depend on the value of text 1, you define it like this:

如果您希望text2的值取决于文本1的值,则可以像这样定义它:

viewModelData.Text2 = ko.computed(function(vm) {
    return vm.Text1() + "something";
}, viewModelData);

If you want to bind text2, and also have the ability to update it programmatically:

如果要绑定text2,并且还能够以编程方式更新它:

viewModelData.Text1.subscribe(function(value) {
    viewModelData.Text2(value + "something");
});