Knockoutjs 映射不会将 observables 添加到字符串数组中

Question

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

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

我正在使用敲除映射插件将数据映射到带有 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>

小提琴http://jsfiddle.net/n87esdLv/2/

Answer 1

在foreach 中不能使用$data：

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

正如您在documentation 中看到的那样：

$原始数据

这是当前上下文中的原始视图模型值。通常这与 $data 相同，但如果提供给 Knockout 的视图模型被包装在一个可观察对象中，则 $data 将是未包装的视图模型，而 $rawData 将成为 observable 本身。

那么，你需要改用$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>