如何将输入值更改订阅到淘汰视图模型?

时间:2016-07-21 20:01:08

标签: jquery knockout.js

以下是示例代码。

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='liveExample'>   
    <p>First name: <input id="fn" data-bind='value: firstName' /></p> 
    <p>Last name: <input id="ln" data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
    <button onclick="change()">
    change
    </button>
</div>
<select id ="multiSelect" data-bind="options: choices, selectedOptions:   selectedChoice">
</select>
Selected: <strong data-bind="text: selectedChoice"> </strong>

输入值由JavaScript更改,而不是通过knockout viewmodel更改。如何才能最好地订阅该更改并将新值记录到viewmodel中?

1 个答案:

答案 0 :(得分:1)

您可以使用data-bind =&#34; textInput:firstName&#34;更新输入。

检查代码的更新版本:

{
    "min": {"x": -5514.99560546875, "y": -8282.283203125, "z": -253.9999849195592},
    "max": {"x": 5514.99560546875, "y": 8282.283203125, "z": 253.9999849195592}
}