Question

我正在努力解决KnockoutJS的问题，我在下面有块代码

var viewModel = function (value){
    this.name = ko.observable(value);
}
var model = {}; model.firstName = "ABC";
var AppViewModel = new viewModel(model.firstName);
ko.applyBindings(AppViewModel);

在HTML中，我有一个带绑定的视图

data-bind="textInput: name".

这是一项很好的工作。 TextView显示文字：＆＃34; ABC＆＃34;。我有个问题。当我在TextView中更改值时。是否该模型（特殊firstName）从textView更新新值？

Answer 1

问题是model.firstName是object property，但它不是observable，而是您使用object property设置observable {1}}，observable是双向绑定，如果您希望firstName成为可观察/双向绑定，您可以这样做：

var viewModel = function (){
    VM = this;
    VM.firstName = ko.observable("ABC");
    return VM;
}

var AppViewModel = new viewModel();
ko.applyBindings(AppViewModel);

我们正在创建一个函数viewModel()，该函数返回object，其属性firstName是一个包含"ABC"的挖掘可观察对象。然后我们创建该视图模型的实例并将其应用于页面。现在，如果您对输入进行任何更改，则应更新AppViewModel.firstName的值。

或者为了使它与代码更相似，你可以这样做：

var viewModel = function (){
    this.firstName = ko.observable("ABC");
}

var AppViewModel = new viewModel();
ko.applyBindings(AppViewModel);

请注意，无需使用属性model创建firstName对象，您只需使用observable初始化string即可获取任何内容textInput绑定中所做的更改。

Answer 2

构造函数AppViewModel在构造时接受 Model 。生成的 ViewModel 将与视图进行双向数据绑定。

您通常拥有的是构造函数的反向方法，可以使用例如通过后端的模型保存更改时。以下是您的示例演示：

＆＃13;

function AppViewModel(model){
    var self = this;
    
    self.firstName = ko.observable(model.firstName);
    self.lastName = ko.observable(model.lastName);
    
    self.asModel = ko.computed(function() {
        return {
            firstName: self.firstName(),
            lastName: self.lastName()
        };
    });
    
    self.saveInBackend = function() {
        // Typically you'd ajax here, instead we log the model:
        console.log(self.asModel());
    };
}
var model = {}; 
model.firstName = "John";
model.lastName = "Doe";

var viewModel = new AppViewModel(model);

ko.applyBindings(viewModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

Firstname: <input data-bind="textInput: firstName"><br>
Lastname: <input data-bind="textInput: lastName"><br>
<button data-bind="click: saveInBackend">saveInBackend</button>
<h4>Debug info, this is the state of your *view model*:</h4>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
<h4>Debug info, this is the state of an updated model:</h4>
<pre data-bind="text: ko.toJSON($root.asModel(), null, 2)"></pre>
<h4>Debug info, this is the state of your *initial model* (which doesn't change):</h4>
<pre data-bind="text: ko.toJSON(window.model, null, 2)"></pre>

＆＃13;

KnockoutJS，绑定视图

2 个答案: