在 Knockout.js 中从模型内部加载 observables答案

【问题标题】：Load observables from inside a model in Knockout.js在 Knockout.js 中从模型内部加载 observables
【发布时间】：2017-05-24 18:54:54
【问题描述】：

我有一个非常简单的项目视图模型。有一个用于编辑项目的单击处理程序，该处理程序应将项目数据从服务器加载到模型中。单击处理程序称为editProject。我想要的只是从服务器加载我的 observables。模型内部的这种方法不起作用。

this.editProject = function(){
    $.getJSON("/projects/get_by_id", {
        id: "7"
    }).done(function(data){
        ko.mapping.fromJSON(data[0], self);
    });
};

【问题讨论】：

您想用data 替换整个视图模型还是将其分配给this.currentData()（例如）？
我不想替换整个视图，而是替换特定用户事件上的可观察值。硬编码的 id 只是举例。
您可以发布您的视图映射到的 html 或模型吗？

标签： javascript json knockout.js knockout-mapping-plugin

【解决方案1】：

我不确定出了什么问题，因为您没有显示您的视图或整个视图模型。在调用editProject 之前如何初始化视图模型？

这是一个在实际project 上方的层中使用editProject 方法的示例。

每个项目都有自己的视图模型，通过在普通对象（来自服务器）上调用 ko.mapping.toJS 创建
初始对象已经具有所有属性，但有些没有值。
在 ajax 请求的成功回调中，通过将其作为第二个参数传递来更新单击的项目：ko.mapping.fromJS(data, project)。

如果data 包含新属性，则在ko.applyBindings 时这些属性将不可用，因此不会进行数据绑定。

const $ = fakeJQuery();

// The project should have its own viewmodel with initial data
// probably received from the server during first load
const myProjects =[
  ko.mapping.fromJS({ id: "1", additionalInfo: null }),
  ko.mapping.fromJS({ id: "7", additionalInfo: null })
];

const ViewModel = function() {
  this.projects = ko.observableArray(
    myProjects
  );

  // Take the project to edit as an argument
  this.editProject = function(project) {
    $.getJSON("/projects/get_by_id", project)
      .done(function(data) {
        // Because we have access to the clicked project,
        // we map to its existing viewmodel using `fromJS`
        ko.mapping.fromJS(data, project);
      });
  };
};

ko.applyBindings(new ViewModel());

// Mocks
function fakeJQuery() {
  return {
    // Mock ajax request
    getJSON: function(url, opts) {
      let done = () => true;

      setTimeout(function() {
        // Test data to indicate an update:
        done({
          id: opts.id(),
          additionalInfo: "Test " + opts.id()
        });
      }, 1000);

      return {
        done: cb => done = cb
      };
    }
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<ul data-bind="foreach: projects">
  <li>
    <code data-bind="text: 'id: ' + id()"></code>
    <button data-bind="click: $parent.editProject">edit</button>

    <p>
      Info:
      <strong data-bind="text: additionalInfo"></strong>
      <em data-bind="visible: !additionalInfo()">not loaded</em>
    </p>
  </li>
</ul>

【讨论】：