Question

我有以下例子：

第一个例子：

package kalkulator;

class Kalkulator {
    public static void main(String args[]) {
    // rest of the code here
    }
}

或

在第二个例子中，我在模型上放了一个observable：

var model = function(){
 return {
    FirstName: ko.observable(), LastName: ko.observable(), Age: ko.observable()   
  }
}

self.Model = model();

//assumes we get from the server
geCustomer().done(function(json){
   self.Model.FirstName(json.FirstName);
   self.Model.LastName(json.LastName);
   self.Model.Age(json.Age);
});

//then in your html

<input data-bind="text: Model.FirstName" />
<input data-bind="text: Model.LastName" />
<input data-bind="text: Model.Age" />

哪个更好或者更好。我不确定差异，或者是否有人可以解释差异。

Answer 1

在示例2中，只有对整个模型的更改才会触发更新。模型上的各个属性不可观察，对它们的更改不会传播到UI。

这将触发更新 - self.Model({...new data...})

这将不触发更新 - self.Model().FirstName = ...new data...;

因此，如果您计划通过代码或通过允许用户修改它的UI绑定自行更新属性，那么除非该特定属性是可观察的（例如示例1），否则不会注意到该更改。 / p>

编辑：这是一个显示我的意思的片段。模拟服务器更新按照您的预期运行，因为它正在更新整个模型对象，但如果您尝试键入与各个属性绑定的输入框，您将看到模型属性未使用您键入的内容进行更新。

var model = function() {
  return {
    FirstName: '',
    LastName: '',
    Age: ''
  }
}

var viewModel = function() {
  var self = this;
  self.Model = ko.observable(model());

  //assumes we get from the server
  setTimeout(function(json) {
    self.Model({
      FirstName: 'firstname',
      LastName: 'lastname',
      Age: 'age'
    });
  }, 1000);
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input data-bind="textInput: Model().FirstName" />
<br/>
<input data-bind="textInput: Model().LastName" />
<br/>
<input data-bind="textInput: Model().Age" />
<br/>
<br/> 
FirstName: <span data-bind="text: Model().FirstName"></span>
<br/> 
LastName: <span data-bind=" text: Model().LastName"></span>
<br/> 
Age: <span data-bind="text: Model().Age"></span>

Answer 2

如果您希望使用KnockoutJS进行双向数据绑定，则应使用ko.observable作为您希望双向数据绑定的属性，例如： firstName，lastName和age。

让我们为客户创建一个模型：

var Customer = function(){
  this.firstName = ko.observable();
  this.lastName = ko.observable();
  this.age = ko.observable();
};

接下来，我创建了另一个对象文字来处理服务器调用，如下所示：

var CustomerService = {
  getCustomers: function(){
    return [];
  },
  getCustomerById: function(id){
    // fetch customer from somewhere by id...
    var customer = new Customer();
    customer.firstName('sid ' + id);
    customer.lastName('pandey ' + id);
    customer.age(25 + id);

    return customer;
  }  
};

现在，两个片段可以一起用于为视图提供视图模型服务器：

    var viewModel = {
        customers: CustomerService.getCustomers(),
        selectedCustomer: ko.observable(CustomerService.getCustomerById(1)),
        changeCustomer: function(){
           viewModel.selectedCustomer(CustomerService.getCustomerById(2));
        }
    };

ko.applyBindings(viewModel);

HTML看起来像这样：

 <div>
      <input data-bind="value: selectedCustomer().firstName" />
      <input data-bind="value: selectedCustomer().lastName" />
      <input data-bind="value: selectedCustomer().age" />
    </div>

<button data-bind="click: changeCustomer">Change Customer</button>

在此处运行此演示：https://jsfiddle.net/axtkp8v9/3/

分配Knockout模型的最佳方式

2 个答案: