淘汰赛：多个视图模型订阅 Json

Question

我希望能够像这样组织我的 Knockout 代码：

• 导入“Master Json”文件并进行映射。
• 创建多个视图模型，每个模型都引用“Master Json”文件的特定部分。
• 将每个视图模型中的所有可观察对象绑定到“Master Json”文件的值。

是否可以使用 ko.subscribable 让所有内容都订阅我的 json 文件作为主值？

或者如何从每个视图模型函数内部移动 $.getJSON（和保存）函数？我可以创建一个函数，以便 getJSON 结果可在每个视图模型中重复使用吗？

function ApplesViewModel ( data ) {

    // ko.observables here 

    //Get Json
    $.getJSON("json/masterJson.json", function(allData) {
        var mappedSlides = $.map(allData, function(item) { return new Slide(item) });
        self.slides(mappedSlides);
    });    

    //Save Json
    self.save = function() {
        $.ajax("/masterJson", {
            data: ko.toJSON({ slides: self.slides }),
            type: "post", contentType: "application/json",
            success: function(result) { alert(result) }
        });
    }; 
}

function BananasViewModel( data ) {
    //same as ApplesViewModel but with different observables
}

function CarrotsViewModel( data ) {
    //same as ApplesViewModel but with different observables
}

ko.applyBindings(new ApplesViewModel());
ko.applyBindings(new BananasViewModel());
ko.applyBindings(new CarrotsViewModel());

我不想多次导入它，因为我认为每次都会制作一个新副本。它应该只有一个 Json 文件。当我尝试移动它时，我会收到所有内容都未定义的错误。

也许这是完全错误的做法。每个人都将所有内容都放在一个视图模型中吗？会不会很快变得混乱？

Answer 1

是的，您可以为此使用ko.subscribable，如果这样做，请查看ko.postbox，这是ko.subscriable 的实用程序包装器。这将允许您跨视图模型发布您的 json。

因此，使用ko.postbox，您将发布和订阅事件/主题。制作一个单独的函数来从服务器加载您的 JSON，并使其发布一个事件，并且该事件的所有订阅者将在收到数据时知道。

function DataLoader(){
  var self = this;
  self.loadJSON = function(){
    //Load JSON using getJSON from server and publish event "JsonDataLoaded"
    setTimeout(function(){
          ko.postbox.publish("JsonDataLoaded", data);
    }, 3000)
  };
}

var loader = new DataLoader();
loader.loadJSON();

因此，每当您需要新数据时，您都会致电loader.loadJSON' and upon success, that will yield event/topic 'JsonDataLoaded。然后，您可以在视图模型中订阅此事件。像

function ApplesViewModel(data) {
  var self = this;

  ko.postbox.subscribe("JsonDataLoaded", function(newData){
    ko.mapping.fromJS(newData,{},self);
  },self,true);

}

CodePen 参考。

Answer 2

让我为进一步的对话创建一个起点：

function ApplesViewModel(data) {
    self.slides = ko.observableArray($.map(data, function(item) { return new Slide(item) }));
    // setup other properties here 
}

function getFruitViewModel(modelUrl, targetModelHolder) {
    $.getJSON(modelUrl, function(allData) {
        targetModelHolder(new ApplesViewModel(allData));
    });    
}

function saveFruitViewModel(saveModelUrl, targetModelHolder) {
    $.ajax(saveModelUrl, {
        data: ko.toJSON(ko.unwrap(targetModelHolder)),
        type: "post", contentType: "application/json",
        success: function(result) { alert(result) }
    });
}

使用示例：

    var applesViewModel = ko.observable();
    getFruitViewModel("json/masterJson.json", applesViewModel);
    // some work with view model(s)
    saveFruitViewModel("/masterJson", applesViewModel);

如有误解请指正。

更新 1

创作者功能：

function getFruitViewModel(modelUrl, targetModelHolder, creator) {
    $.getJSON(modelUrl, function(allData) {
        targetModelHolder(creator(allData));
    });    
}

用法：

    getFruitViewModel("json/masterJson.json", applesViewModel, function(data) { return new ApplesViewModel(data); });