Knockoutjs 映射不会将可观察对象添加到字符串数组

Question

我正在从服务器获取此类数据

{
    FirmName: "Firm Name",
    Address: "123 Address",
    AltNames: [
        "First Alt Name",
      "Second Alt Name"
    ]
  }

我正在使用 knockout 映射插件将数据映射到具有 ko.mapping.fromJS(data, {}, this);

的 viewModel

但是，无论何时更改任何字符串数组元素，我的更改都不会传播到 viewModel。我该怎么做才能解决这个问题？

我的js：

function firmModel() {
    //this is what I get from the server
  var data = {
    FirmName: "Firm Name",
    Address: "123 Address",
    AltNames: [
        "First Alt Name",
      "Second Alt Name"
    ]
  };
  
  ko.mapping.fromJS(data, {}, this);
  
}

var em = new firmModel();
ko.applyBindings(firmModel);

我的html:

<div>
  <label>Company</label>
  <input type="text" data-bind="value: FirmName">
</div>
<div>
  <label>Address</label>
  <input type="text" data-bind="value: Address">
</div>
<br>
<h3>
Alt Names
</h3>
<ul data-bind="foreach: AltNames">
  <li>
    <input type="text" data-bind="value: $data">
  </li>
</ul>

<br/><br/>
<h2>
Result of the changes where I see whether viewModel picks up my changes above
</h2> 
<span>Company: </span><span data-bind="text: FirmName"></span><br/>
<span>Address: </span><span data-bind="text: Address"></span><br/>
<br/>
Alt Names: <br/>
<ul data-bind="foreach: AltNames">
  <li data-bind="text: $data"></li>
</ul>

Fiddle http://jsfiddle.net/n87esdLv/2/

Answer 1

在foreach中你不能使用$data:

<input type="text" data-bind="value: $data">

如您在 documentation 中所读：

$rawData

This is the raw view model value in the current context. Usually this will be the same as $data, but if the view model provided to Knockout is wrapped in an observable, $data will be the unwrapped view model, and $rawData will be the observable itself.

然后，你需要使用 $rawData 来代替，因为 AltNames 数组的内容必须是可观察的，而不是字符串。

AltNames 中的字符串必须是可观察的。您需要使用 custom object construction using “create”:

自定义 AltNames 数组的创建

var mapping = {
        'AltNames': {
                create: function(options) {
                        return ko.observable(options.data);
                }
        }
}

ko.mapping.fromJS(data, mapping, this);

这是一个可运行的例子：

function firmModel() {
    //this is what I get from the server
  var data = {
    FirmName: "Firm Name",
    Address: "123 Address",
    AltNames: [
        "First Alt Name",
      "Second Alt Name"
    ]
  };
  
  //ko.mapping.fromJS(data, {}, this);
    var mapping = {
            'AltNames': {
                    create: function(options) {
                            return ko.observable(options.data);
                    }
            }
    }

  ko.mapping.fromJS(data, mapping, this);       
  
}

var em = new firmModel();
ko.applyBindings(firmModel);

h2{
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div>
  <label>Company</label>
  <input type="text" data-bind="value: FirmName">
</div>
<div>
  <label>Address</label>
  <input type="text" data-bind="value: Address">
</div>
<br>
<h3>
Alt Names
</h3>
<ul data-bind="foreach: AltNames">
  <li>
    <input type="text" data-bind="value: $rawData">
  </li>
</ul>

<br/><br/>
<h2>
Result of the changes
</h2> 
<span>Company: </span><span data-bind="text: FirmName"></span><br/>
<span>Address: </span><span data-bind="text: Address"></span><br/>
<br/>
Alt Names: <br/>
<ul data-bind="foreach: AltNames">
  <li data-bind="text: $data"></li>
</ul>

Knockoutjs 映射不会将可观察对象添加到字符串数组

Knockoutjs mappings don't add observables to array of strings

knockout-mapping-plugin

knockout.js