Javascript 如何在使用复杂模型的敲除JS上刷新JSON或将JSON加载到我的viewModel_Javascript_Json_Mvvm_Knockout.js

Javascript 如何在使用复杂模型的敲除JS上刷新JSON或将JSON加载到我的viewModel

javascript json mvvm knockout.js

Javascript 如何在使用复杂模型的敲除JS上刷新JSON或将JSON加载到我的viewModel,javascript,json,mvvm,knockout.js,Javascript,Json,Mvvm,Knockout.js,我从这里开始编写代码：该代码在客户端运行良好。但是，当我尝试将viewModel保存为JSON，然后从服务器检索数据时，UI根本不会刷新这是原始的viewModel： window.QueryBuilder = (function(exports, ko){ var Group = exports.Group; function ViewModel() { var self = this; self.group = ko.observable(new Grou

我从这里开始编写代码：

该代码在客户端运行良好。但是，当我尝试将viewModel保存为JSON，然后从服务器检索数据时，UI根本不会刷新

这是原始的viewModel：

window.QueryBuilder = (function(exports, ko){

  var Group = exports.Group;

  function ViewModel() {
    var self = this;
    self.group = ko.observable(new Group());

        // the text() function is just an example to show output
    self.text = ko.computed(function(){
      return self.group().text();
    });
  }

  exports.ViewModel = ViewModel;
  return exports;

})(window.QueryBuilder || {}, window.ko);

window.QueryBuilder = (function(exports, ko){

  var Condition = exports.Condition;

  function Group(data){
    var self = this;

    self.templateName = data.templateName;
    self.children = ko.observableArray(data.children);
    self.logicalOperators = ko.observableArray(data.logicalOperators);
    self.selectedLogicalOperator = ko.observable(data.selectedLogicalOperator);

    // give the group a single default condition
    self.children.push(new Condition());

    self.addCondition = function(){
        self.children.push(new Condition());
    };

    self.addGroup = function(){
        self.children.push(new Group());
    };

    self.removeChild = function(child){
        self.children.remove(child);
    };

    // the text() function is just an example to show output
    self.text = ko.computed(function(){
      var result = '(';      
      var op = '';
      for (var i = 0; i < self.children().length; i++){
        var child = self.children()[i];
        console.log(child);
        result += op + child.text();
        op = ' ' + self.selectedLogicalOperator() + ' ';
      }
      return result += ')';
    });
  }

  exports.Group = Group;
  return exports;

})(window.QueryBuilder || {}, window.ko);

  var vm;
  window.addEventListener('load', function(){ 
    var json = {"group":{"templateName":"group-template","children":[{"templateName":"condition-template","fields":["Points","Goals","Assists","Shots","Shot%","PPG","SHG","Penalty Mins"],"selectedField":"Points","comparisons":["=","<>","<","<=",">",">="],"selectedComparison":"=","value":0,"text":"Points = 0"},{"templateName":"condition-template","fields":["Points","Goals","Assists","Shots","Shot%","PPG","SHG","Penalty Mins"],"selectedField":"Points","comparisons":["=","<>","<","<=",">",">="],"selectedComparison":"=","value":0,"text":"Points = 0"},{"templateName":"condition-template","fields":["Points","Goals","Assists","Shots","Shot%","PPG","SHG","Penalty Mins"],"selectedField":"Points","comparisons":["=","<>","<","<=",">",">="],"selectedComparison":"=","value":0,"text":"Points = 0"}],"logicalOperators":["AND","OR"],"selectedLogicalOperator":"AND","text":"(Points = 0 AND Points = 0 AND Points = 0)"},"text":"(Points = 0 AND Points = 0 AND Points = 0)"}; 

    vm = new QueryBuilder.ViewModel(json);  
    ko.applyBindings(vm);           
  }, true);

我将向viewModel添加下一个方法

self.Save = function () {
    console.log(ko.toJSON(self));
}

将此按钮添加到视图中

<input type="submit" value="Save" data-bind="click: Save"/>

刷新index.html时，视图从未正确加载，并在JS控制台上显示此错误：

TypeError: self.group(...).text is not a function
return self.group().text();

有人知道我的错在哪里

我遇到的最后一个问题与子对象上的text（）函数有关。我用try/catch来解决这个问题。因此，当viewModel是新的时，它有text（）函数，但当加载时，text（）不存在，因此我直接从“text”字段获取值

问题出在组类和条件类上。这是当前和工作代码：

window.QueryBuilder = (function(exports, ko){

  var Condition = exports.Condition;

  function Group(data){
    var self = this;

    self.templateName = data.templateName;
    self.children = ko.observableArray(data.children);
    self.logicalOperators = ko.observableArray(data.logicalOperators);
    self.selectedLogicalOperator = ko.observable(data.selectedLogicalOperator);

    // give the group a single default condition
    self.children.push(new Condition(data.children[0]));

    self.addCondition = function(){
        self.children.push(new Condition());
    };

    self.addGroup = function(){
        self.children.push(new Group());
    };

    self.removeChild = function(child){
        self.children.remove(child);
    };

    // the text() function is just an example to show output
    self.text = ko.computed(function(){
      var result = '(';      
      var op = '';
      for (var i = 0; i < self.children().length; i++){
        var child = self.children()[i];

        try {
            result += op + child.text();
        }
        catch(err) {
            result += op + child.text;
        }           

        op = ' ' + self.selectedLogicalOperator() + ' ';
      }
      return result += ')';
    });
  }

  exports.Group = Group;
  return exports;

})(window.QueryBuilder || {}, window.ko);

window.QueryBuilder = (function(exports, ko){

  function Condition(data){
    var self = this;

    self.templateName = data.templateName;

    self.fields = ko.observableArray(data.fields);
    self.selectedField = ko.observable(data.selectedField);

    self.comparisons = ko.observableArray(data.comparisons);

    self.selectedComparison = ko.observable(data.selectedComparison);

    self.value = ko.observable(data.value);

    // the text() function is just an example to show output
    self.text = ko.computed(function(){
      return self.selectedField() + 
        ' ' +
        self.selectedComparison() + 
        ' ' + 
        self.value();
    });
  }

  exports.Condition = Condition;
  return exports;

})(window.QueryBuilder || {}, window.ko);

window.QueryBuilder=（函数（导出，ko）{
var条件=导出。条件；
功能组（数据）{
var self=这个；
self.templateName=data.templateName；
self.children=ko.observearray（data.children）；
self.logicalOperators=ko.observearray（data.logicalOperators）；
self.selectedLogicalOperator=ko.可观察（data.selectedLogicalOperator）；
//为组指定一个默认条件
self.children.push（新条件（data.children[0]）；
self.addCondition=函数（）{
self.children.push（新条件（））；
};
self.addGroup=函数（）{
self.children.push（新组（））；
};
self.removeChild=函数（子级）{
self.children.remove（child）；
};
//text（）函数只是一个显示输出的示例
self.text=ko.computed（函数（）{
var结果='（'；
var op=''；
for（var i=0；i

而不是

self.group=ko.observable（json.group），您应该采取与加载时类似的方法self.group=ko.observable（new group（））
，但这次在组中传递json.group
数据
 self.group = ko.observable(new Group(json.group));

我看不出Group
是在哪里定义的，但您应该确保它能够处理并将您现在传入的JSON转换为可观察对象。
我只是检查了一下该代码，但它不起作用。我已经用组码编辑了我的原始问题。谢谢。不，错误已经消失了。但是UI从未刷新或加载JSON。好的，听起来您必须编辑组类。我现在没有时间处理它，但它需要处理您传入的json，并使用您传入的值初始化可观察对象。但是如果我不注释这行：result+=op+child.text（）；代码不起作用。错误为：TypeError:child.text不是函数result+=op+child.text（）；这个方法在child上被调用，但不起作用，你知道为什么吗？我修改了text（）函数的代码，效果非常好。谢谢
try {
    result += op + child.text();
}
catch(err) {
    result += op + child.text;
}           

window.QueryBuilder = (function(exports, ko){

  var Condition = exports.Condition;

  function Group(data){
    var self = this;

    self.templateName = data.templateName;
    self.children = ko.observableArray(data.children);
    self.logicalOperators = ko.observableArray(data.logicalOperators);
    self.selectedLogicalOperator = ko.observable(data.selectedLogicalOperator);

    // give the group a single default condition
    self.children.push(new Condition(data.children[0]));

    self.addCondition = function(){
        self.children.push(new Condition());
    };

    self.addGroup = function(){
        self.children.push(new Group());
    };

    self.removeChild = function(child){
        self.children.remove(child);
    };

    // the text() function is just an example to show output
    self.text = ko.computed(function(){
      var result = '(';      
      var op = '';
      for (var i = 0; i < self.children().length; i++){
        var child = self.children()[i];

        try {
            result += op + child.text();
        }
        catch(err) {
            result += op + child.text;
        }           

        op = ' ' + self.selectedLogicalOperator() + ' ';
      }
      return result += ')';
    });
  }

  exports.Group = Group;
  return exports;

})(window.QueryBuilder || {}, window.ko);

window.QueryBuilder = (function(exports, ko){

  function Condition(data){
    var self = this;

    self.templateName = data.templateName;

    self.fields = ko.observableArray(data.fields);
    self.selectedField = ko.observable(data.selectedField);

    self.comparisons = ko.observableArray(data.comparisons);

    self.selectedComparison = ko.observable(data.selectedComparison);

    self.value = ko.observable(data.value);

    // the text() function is just an example to show output
    self.text = ko.computed(function(){
      return self.selectedField() + 
        ' ' +
        self.selectedComparison() + 
        ' ' + 
        self.value();
    });
  }

  exports.Condition = Condition;
  return exports;

})(window.QueryBuilder || {}, window.ko);

 self.group = ko.observable(new Group(json.group));