Как согласовать динамическое сопоставление KO с руководством?

Question

У меня часто возникает ситуация, когда я хочу иметь C# ViewModel, сопоставленную с представлением вида нокаута в представлении.

Это означает, что я обычно делаю что-то вроде:

<script> 
    var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)); 
</script> 

И это получает C# ViewModel в мой ViewModel просто отлично. Но я часто хочу, чтобы пользователь мог взаимодействовать с viewModel значимыми способами, поэтому скажите, что моя модель является List<User> и User имеет свойства Name и Age. Мой взгляд может выглядеть следующим образом:

<table class="table"> 
    <tbody data-bind="foreach: viewModel"> 
     <tr> 
      <td><input type="text" data-bind="value: Name" /></td> 
      <td><input type="text" data-bind="value: Age" /></td> 
      <td><span class="glyphicon glyphicon-remove" data-bind="click: Remove"></span></td> 
     </tr> 
    </tbody> 
</table> 
<button type="button" data-bind="click: AddUser">Add User</button> 

Теперь у меня есть кнопка, чтобы удалить каждый User в каждой строке, но для того, чтобы придать эту функциональность, мне нужно, чтобы добавить метод Remove к каждому User в List. Здесь начинается моя неопределенность. То, что я делал это в основном:

<script> 
    var vm = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)); 

    var viewModel = function (vm) { 
     var self = {}; 

     self.Users = vm; 

     ko.utils.arrayForEach(self.Users(), function(item) { 
      item.Remove = function() 
      { 
       self.Users.remove(this); 
      } 
     }); 

     self.AddUser = function() { 
      self.Users.push({ 
       Name: "", 
       Age: "" 
      }); 
     } 
    } 

</script> 

Хотя это работает (я freehanded это, так что могут быть некоторые ошибки), это кажется слишком многословным и неуклюжим, чтобы перебрать мой отображенной ViewModel, чтобы добавить необходимые функции и скоро. Есть ли более чистый способ сделать это, или я просто схожу с ума?

Answer 1

Я хотел бы пойти по-другому с этим и поставить функцию удалить() в ViewModel:

var viewModel = function (vm) { 
    var self = {}; 

    self.Users = vm; 

    self.remove = function(item) { 
     self.Users.remove(item); 
    }; 

    self.AddUser = function() { 
     self.Users.push({ 
      Name: "", 
      Age: "" 
     }); 
    } 
} 

, а затем вызвать его на ваш взгляд, как это:

<td><span class="glyphicon glyphicon-remove" data-bind="click: $parent.remove"></span></td>