Question

我正在创建一个像这样的复选框集合。

某些背景：起初我只是为整个客户端VM使用ko.mapping插件。

例如在我的代码中：

self.AllAgencyTypes = ko.mapping.fromJS([]);

self.observables = {   //this would be created by the mapping plugin on render/runtime
    SomeProperty: ko.observable(),
    AgencyTypes: ko.observableArray()
}

我的复选框正确呈现，但在屏幕加载时不会检查相应的复选框。然后我开始意识到淘汰赛中的一个问题，我需要将我的checked属性更改为文本。（见我获得ajax电话的成功）

HTML

<tbody data-bind="foreach: AllAgencyTypes">
 <tr>
   <td>
    <label class="checkbox inline">
       <input  type="checkbox" class="editorField" data-bind="attr: { value: Id }, 
                           checked: $root.SelectedAgencies" />
       <span class="editorField" data-bind="text: Name"></span>
    </label>
  </td>
 </tr>
</tbody>

视图模型

  AgencyDetailsVM: function (options) {

         var self = this;    

         self.AllAgencyTypes = ko.mapping.fromJS([]);

         //added this to get past the check-box bug
         self.SelectedAgencies = ko.observableArray([]); 

         // CRUD Actions
         self.get = function () {
             $.ajax({
                url: options.getURL,
                dataType: 'json',
                success: function (result) {

                    self.observables = ko.mapping.fromJS(result);    

                    //convert to string array
                    self.SelectedAgencies($.Enumerable.From(result.AgencyTypes)
                        .Select(function (x) {
                          return x.Id.toString();
                        }).ToArray()
                    );


                    ko.applyBindings(self, $('form')[0]);
                 }
           });


           $.getJSON(options.getAgencyTypes, function (response) {
                    ko.mapping.fromJS(response, self.AllAgencyTypes);
           });
       };    
 }

我目前的问题是保存提交。因为我的复选框被绑定到新创建的可观察数组，所以它们没有绑定到我的服务器端模型。

$.ajax({
         url: options.editURL,
         data: self.observables,
         type: "post",
         dataType: "json",    .... 
})

我有一个想法，如果我能够做这样的事情......它可能解决我的问题...但我不知道如何。（获取.string不允许/错误ATM。）

<input  type="checkbox" class="editorField" data-bind="attr: { value: Id }, 
                               checked: $root.observables.AgencyTypes.Id.toString()" />

因此，我看到可用的唯一选择是将集合推回到由ko.mapping创建的原始对象...我现在也不知道该怎么做...任何想法的人？

Answer 1

您正在寻找ko.toJSON，这是一个静态方法，它返回具有可观察成员的任何对象的JSON版本！试试这个：

$.ajax({
     url: options.editURL,
     data: ko.toJSON(self.observables),
     type: "post",
     dataType: "json",    .... 
})

如果由于某种原因，您需要“普通JS”而不是序列化的JSON字符串，则可以使用ko.toJSON本身使用的前提函数ko.toJS：

var plainJSVM = ko.toJS(self.observables); // this produces a JS object containing the current, primitive values of all observables, ready to be serialized as JSON.

Answer 2

checked绑定需要绑定布尔值或数组，因此不能直接绑定字符串。

您可以考虑为每个项目添加布尔值，并使用computed observable来表示所选项目。

否则，您可以对SelectedAgencies使用manual subscription以保持AgencyTypes同步。

Knockout将复选框绑定到复选框并提交服务器

2 个答案: