KnockoutJS汇编组件的更新数据

时间:2017-11-22 13:03:28

标签: javascript knockout.js

我是KnockoutJS的新手。 我有一个以下列方式工作的应用程序:

  1. 加载页面时,会将复杂的数据结构传递给前端
  2. 此数据结构被拆分为更小的块,这些数据块将传递给组件
  3. 用户与组件交互以编辑数据块
  4. 点击按钮后,更新后的复杂数据结构应传递给后端
  5. 第四步我遇到了麻烦。我一直在阅读文档,但我无法弄清楚我应该如何获得更新的数据。

    这是一个JSFiddle:https://jsfiddle.net/vrggyf45

    以下是代码段中的相同代码。请参阅问题的底部,了解我尝试过的内容。

    ko.components.register('firstComponent', {
      viewModel: function(params) {
        var self = this;
        self.firstComponentValue = ko.observable(params.firstComponentValue);
      },
      template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: firstComponentValue, valueUpdate: \'afterkeydown\'"></div>'
    });
    
    ko.components.register('secondComponent', {
      viewModel: function(params) {
        var self = this;
        self.secondComponentValue = ko.observable(params.secondComponentValue);
      },
      template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: secondComponentValue, valueUpdate: \'afterkeydown\'"></div>'
    });
    
    
    var json = '{"items":[{"componentName":"firstComponent","firstComponentValue":"somevalue"},{"componentName":"secondComponent","secondComponentValue":"someothervalue"}]}';
    var data = JSON.parse(json);
    var mainVM = {};
    mainVM.items = ko.observableArray(
      ko.utils.arrayMap(data.items,
        function(item) {
          return ko.observable(item);
        }));
    
    ko.applyBindings(mainVM);
    
    $('input[type=button]').click(function() {
      var updatedData = ko.dataFor(document.getElementById('main'));
      //get updated json somehow?
      console.log(data);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div id="main">
      <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
      <div data-bind="foreach: {data: items, as: 'item'}">
        <hr>
        <div data-bind="component: {name:componentName, params: item}">
        </div>
      </div>
      <hr>
      <input type="button" value="post data">
    </div>

    如果我有一个单一的视图模型,我可以使用ko.dataFor($("#rootElement"))并将其发送到后端。但是我打算使用组件,它们有自己的视图模型,它们没有连接到根视图模型。我可以用jQuery找到它们并使用ko.dataFor但它对我来说看起来像是一个大黑客。 我也可以定义所有的视图模型,包括主视图模型中的组件,但它使组件变得毫无用处。

    此外,我尝试更改组件viewmodels构造函数,以便它们改变输入数据并使用observable覆盖incomming值,但它对我来说似乎也是一个黑客。

    是否有像ko.components这样的函数或能够给我所有生活视图模型的东西?

1 个答案:

答案 0 :(得分:1)

您可以将observable传递给组件,以便它们的编辑立即反映在父对象中。 ko.mapping对于将普通JS对象转换为可观察对象非常方便。然后当您想要数据时,ko.toJS()它。

&#13;
&#13;
ko.components.register('firstComponent', {
  viewModel: function(params) {
    var self = this;
    self.firstComponentValue = params.firstComponentValue;
  },
  template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: firstComponentValue, valueUpdate: \'afterkeydown\'"></div>'
});

ko.components.register('secondComponent', {
  viewModel: function(params) {
    var self = this;
    self.secondComponentValue = params.secondComponentValue;
  },
  template: '<div><pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre><input data-bind="value: secondComponentValue, valueUpdate: \'afterkeydown\'"></div>'
});


var json = '{"items":[{"componentName":"firstComponent","firstComponentValue":"somevalue"},{"componentName":"secondComponent","secondComponentValue":"someothervalue"}]}';
var data = JSON.parse(json);
var mainVM = {};
mainVM.items = ko.mapping.fromJS(data.items);

ko.applyBindings(mainVM);

$('input[type=button]').click(function() {
  var updatedData = ko.toJS(ko.dataFor(document.getElementById('main')));
  //Or, more simply: updatedData = ko.toJS(mainVM);
  console.log(updatedData);
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
  <div data-bind="foreach: {data: items, as: 'item'}">
    <hr>
    <div data-bind="component: {name:componentName, params: item}">
    </div>
  </div>
  <hr>
  <input type="button" value="post data">
</div>
&#13;
&#13;
&#13;