Как работает плагин MappingJockoutJS

Question

здесь у меня есть пример кода, который сказал, что плагин KnockoutJS Mapping автоматически связывает пользовательский интерфейс. здесь код

<script src="~/Scripts/knockout.mapping-latest.js"></script> 
<script type="text/javascript"> 
     $(function() { 
      var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson())); 
      ko.applyBindings(viewModel); 
      }); 
</script> 

предположим, мой HTML связывание следующим

<p>First name: <strong data-bind="text: firstName"></strong></p> 
<p>Last name: <strong data-bind="text: lastName"></strong></p> 

и моей стороне сервера модели возвращения JSON как

{fname:Josh;lname:Steve}; 

так вот мой вопрос, как можно было понять KnockoutJS Mapping плагин что значение fname нужно сопоставить с привязкой к базе данных firstName & lname необходимо сопоставить с databinding lastName?

Я понимаю, что я пытаюсь сказать. так что в этом случае мне будет показано, как можно связать json с html UI через плагин Mapping KnockoutJS.

в этой ситуации нокаутJS Mapping плагин был бы правильным выбором или нет?

мне нужно связать вручную viewmode как

Имя:

Фамилия:

json as follows var person = {fname:Josh;lname:Steve}; 

var viewModel = function(person) { 
    this.firstname= ko.observable(person.fname); 
    this.lastname= ko.observable(person.lname); 
}; 

ko.applyBindings(new viewModel(person)); 

Answer 1

В соответствии с просьбой в комментарии я ставлю это в качестве возможного ответа.

Если у вас есть модель со многими свойствами и хотите лишь некоторые из них сопоставить с разными названиями, это способ сделать это:

var viewModel = ko.mapping.fromJS(@Html.Raw(Model.ToJson())); 
var extendViewModel = function() { 
    this.firstName = ko.computed({ 
     read: function(){ 
      return viewModel.fname(); 
     }, 
     write: function(value){ 
      viewModel.fname(value); 
     }, 
     owner: viewModel 
    }); 
}; 

viewModel = ko.mapping.fromJS(new extendViewModel(), viewModel); 
ko.applyBindings(viewModel); 

Затем вы можете использовать ПгвЬЫат в разметке для привязки и ViewModel .fname также будет обновлено.