淘汰赛将复选框绑定到复杂对象并提交服务器答案

【问题标题】：Knockout bind check-box to complex object and submit so server淘汰赛将复选框绑定到复杂对象并提交服务器
【发布时间】：2012-11-22 15:26:35
【问题描述】：

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

一些上下文：起初，我专门为整个客户端 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()
}

在屏幕加载时不会检查我的复选框，但相应的复选框除外。然后我意识到淘汰赛中的一个问题，我需要将我的选中属性更改为文本。（查看我的 get 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);
           });
       };    
 }

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

$.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 创建的原始对象中......我目前也不知道该怎么做......有什么想法吗？

【问题讨论】：

标签： knockout.js knockout-mapping-plugin knockout-2.0

【解决方案1】：

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

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

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

【讨论】：

我喜欢订阅的想法，我明天会尝试一下，让你知道我的发现......

【解决方案2】：

您正在寻找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.

【讨论】：